我的网站目前有 12 列/12 行网格布局。使用移动仿真时它工作正常并且响应灵敏。问题是,在实际手机上查看网站时,页脚最初位于地址栏上方,但当地址栏消失时,它会停留在同一位置,内容会溢出。
第一张图片是最初的样子。
第二张图片是我滚动后的。
然后 html 和 body 设置为 100%,我尝试在 body 上使用 vh。
不要使用 vh,使用 %
body {
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}
示例 ::
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
.header {
background-color: #333;
color: white;
padding: 10px;
}
.content {
flex: 1;
padding: 20px;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
margin-top: auto;
}
</style>
</head>
<body>
<header class="header">
<h1>Welcome to My Website</h1>
</header>
<section class="content">
<p>This is some content on my website.</p>
</section>
<footer class="footer">
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>