其实是个小需求，以前也搞过很多次，没想到前几天被坑了一下，记一笔。
以前，如果想要页面在内容任意多的时候都能占满浏览器，可以简单设置：
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) 做限制。
发表回复