Bil*_*ton 0 css mobile scroll ios flexbox
我注意到当使用基于弹性框的布局与position: fixed页脚时,滚动功能是不同的.固定的页脚更平滑,并显示滚动条.Flexbox根本不光滑,并且不显示滚动条.我更喜欢使用flexbox进行布局,但想要更好的滚动.有没有办法用flexbox实现它？
我在IOS 10 Iphone 7上进行测试.发生在Chrome和safari上
HTML:
<html>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id='main'>
...lots of content so it would scroll
</div>
<nav class="footer">footer</nav>
</body>
</html>
Flexbox方法:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
#main {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.footer {
height: 72px;
min-height: 72px;
background-color: blue;
}
固定页脚方法:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
padding-bottom: 72px;
}
.footer {
position: fixed;
bottom: 0;
height: 72px;
min-height: 72px;
width: 100%;
background-color: blue;
}