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