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) 做限制。
相关文章
移动网页高度自适应最佳实践
移动 Web 开发就要在“螺蛳壳里做道场”。移动设备限于屏幕尺寸，不得已左支右绌，既要多呈现内容，又要保证功能 […]
2024-06-168 分钟
iOS Safari 播放音频的技巧分享
开发 Web App 一直是个蛮尴尬的事情。一方面，Google 不断在推；PWA 等技术也越来越好；另一方面 […]
2024-05-2514 分钟
CSS 小教程：在网格型选择工具上添加渐变背景
新年开始了，要努力，本博客开始 2024 年招商，欢迎各位想推广产品的老板投广告，目前定价 4800/年，亦可 […]
2024-01-135 分钟