山维空间

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) 做限制。

如果您觉得文章内容对您有用，不妨支持我创作更多有价值的分享：

在 GitHub 上赞助我

已发布

分类

来自

meathill

标签：

, ,

评论

欢迎吐槽，共同进步

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。