山维空间

标签： layout

  • CSS 网页保持全屏并自动伸长

    CSS 网页保持全屏并自动伸长

    其实是个小需求，以前也搞过很多次，没想到前几天被坑了一下，记一笔。

    以前，如果想要页面在内容任意多的时候都能占满浏览器，可以简单设置：

    html,
body {
  height: 100%;
}

    但是这样设置，在 Safari 浏览器上，会将 <body> 固定为窗口高度，如果内容多，就会被底部挡住内容。解决方案是 body 高度用 min-height:100%。

    如果是三行一列的结构，即上面是导航条，下面是脚部，中间随内容自适应，可以用：

    body {
  display: flex;
  flex-direction: column;
}

    这个时候，不能用 flex-basis，在 Safari 上会失去弹性，也要用 min-height。所以，最终样式大概就是：

    html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#nav {
  height: 4rem;
}
#bottom {
  height: 10rem;
}
#content {
  flex-grow: 1;
  min-height: 40rem;
}

    另外，因为基本只有桌面浏览器需要这个功能，所以可以考虑加一个 @media (min-width: 576px) 做限制。