Html IPad、Safari、CSS:用flex填充页面
我尝试用flex制作一个布局,将主区域扩展到整个显示高度。当内容很小时,页脚总是在底部。当主要内容高于显示大小时,它应该像普通页面一样,滚动到页脚 下面的代码在我的Firefox和Chrome工作站上的效果与预期一样,但在我的IPad和Safari上,页脚设置在页面的任何位置。 将html高度设置为100%时会出现问题。不设置html部分的任何高度,它就可以工作,但当主要内容小于显示高度时,主体不会拉伸 重要提示:这不能用JSFiddle复制,因为它们使用IFrame,但内部使用整个HTMLHtml IPad、Safari、CSS:用flex填充页面,html,css,ipad,safari,flexbox,Html,Css,Ipad,Safari,Flexbox,我尝试用flex制作一个布局,将主区域扩展到整个显示高度。当内容很小时,页脚总是在底部。当主要内容高于显示大小时,它应该像普通页面一样,滚动到页脚 下面的代码在我的Firefox和Chrome工作站上的效果与预期一样,但在我的IPad和Safari上,页脚设置在页面的任何位置。 将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>
html{
身高:100%;
保证金:0;
}
身体{
保证金:0;
显示器:flex;
弯曲方向:立柱;
身高:100%;
}
主要{
柔性生长:1;
}
div{
背景颜色:黄色;
高度:1200px;
}
主要的
页脚
更新:这个问题也可以在Mac OS X下通过Safari 9.0.2重现。我终于解决了这个问题。重要的是添加
高度:auto代码>和<代码>最小高度:100%代码>至正文
和html
和位置:绝对代码>至正文
下面是在我的所有测试环境中运行的最终代码
<!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{
高度:自动;
最小高度:100%;
保证金:0;
}
身体{
保证金:0;
显示器:flex;
弯曲方向:立柱;
高度:自动;
最小高度:100%;
位置:绝对位置;
宽度:100%;
}
主要{
柔性生长:1;
}
div{
背景颜色:黄色;
高度:200px;
}
主要的
页脚
自2020年起,在Mobile Safari v9.0中:
只需添加flex:10自动代码>到要扩展的flex元素的css,效果很好
(如果您的内容长度超过屏幕上显示的长度,则收缩:0
部分很重要)