0
flexboxベースのレイアウトとposition: fixedフッターの使用時に、スクロール機能が異なることに気付きました。固定フッターははるかにスムーズで、スクロールバーを表示します。 Flexboxは滑らかではなく、スクロールバーも表示されません。私は私のレイアウトのためにフレックスボックスを使用する方が好きですが、より良いスクロールをしたいです。フレックスボックスで実現する方法はありますか？IOS上の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>
フレキシボックス方法：
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;
}