我尝试使用 flex 进行布局,将主要区域扩展到整个显示高度。当内容很小时,页脚总是在底部。当主要内容高于显示尺寸时,它应该像普通页面一样运行并滚动到页脚。
以下代码在我使用 Firefox 和 Chrome 的工作站上按预期工作,但在我使用 Safari 的 iPad 上,页脚设置在页面的任何位置。 将 html 高度设置为 100% 时会出现问题。在不为 html 部分设置任何高度的情况下它可以工作,但是当主要内容小于显示高度时,主体不会被拉伸(stretch)。
重要提示:这不能用 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>
更新:问题也可以在 Mac OS X 和 Safari 9.0.2 下重现
最佳答案
我终于解决了这个问题。将 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>
关于html - iPad、Safari、CSS : Fill page with flex,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34965787/