我尝试使用flex进行布局,以将主区域扩展到整个显示高度。当内容较小时,页脚始终位于底部。当主要内容大于显示尺寸时,它的行为应类似于普通页面,并滚动直到页脚。
以下代码可以在使用Firefox和Chrome的工作站上正常运行,但是在使用Safari的IPad上,页脚设置在页面的任何位置。将html高度设置为100%时会出现问题。在不为html部件设置任何高度的情况下,它可以工作,但是当主要内容小于显示高度时,不会拉伸主体。
重要提示:这无法用JSFiddle复制,因为它们使用的是IFrame,但内部使用了整个HTML。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: 100%;
margin: 0;
}
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100%;
}
main {
flex-grow: 1;
}
div {
background-color: yellow;
height: 1200px;
}
</style>
</head>
<body>
<main>
<div>main</div>
</main>
<footer>
footer
</footer>
</body>
</html>
更新:问题也可以在带有Safari 9.0.2的Mac OS X下重现
我终于解决了这个问题。将height: auto;
和min-height: 100%;
添加到body
以及html
和position: absolute;
添加到body
非常重要。
这是适用于我所有测试环境的最终代码。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: auto;
min-height: 100%;
margin: 0;
}
body {
margin: 0;
display: flex;
flex-direction: column;
height: auto;
min-height: 100%;
position: absolute;
width: 100%;
}
main {
flex-grow: 1;
}
div {
background-color: yellow;
height: 200px;
}
</style>
</head>
<body>
<main>
<div>main</div>
</main>
<footer> footer </footer>
</body>
</html>
截至2020年在Mobile Safari v9.0中:
只需将flex: 1 0 auto;
添加到要扩展的flex元素的cs中,效果很好。
(如果您的内容比屏幕上显示的长,[shrink: 0
部分很重要)