我正在尝试创建页脚，但是每当我在 Chrome 上打开控制台 View 时，页脚就会与控制台一起出现。我看过许多其他人也有同样的问题，但他们通过将页脚的位置设置为固定或绝对来修复它，但当我尝试两者时，我仍然得到相同的结果。
我看过的主题: Footer goes up whenever i open Chrome Console How do you get the footer to stay at the bottom of a Web page?
这是我的 CSS 当前的样子:
html,
body {
height: 100%;
min-height: 100%;
}
.footer {
width: 100%;
bottom: 0px;
left: 0px;
height: 100px;
position: fixed;
background-color: #727272;
}
.footer p {
color: white;
}<div class="footer">
<div class="wrapper">
<p>testing</p>
</div>
</div>wrapper 类仅在左侧和右侧创建边距。
最佳答案
以下是如何使页脚始终保持向下状态，而不使用 position:fixed ，使用您的示例:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main {
flex-grow: 1;
}
.footer {
flex-grow: 0;
background-color: #727272;
}
.footer p {
color: white;
}<body>
<div class="main">
put your content here...
</div>
<div class="footer">
<div class="wrapper">
<p>testing</p>
</div>
</div>
</body>一个完整且语义正确的布局将是:
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header,
footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}<html>
<head></head>
<body>
<header>
Your header here
</header>
<main>
Your content here
</main>
<footer>
Your footer here
</footer>
</body>
</html><footer>和<header>会占用他们需要的空间，但不会更多。 <main>在剩余空间中生长。当<main>需要超过可用空间，它会插入 <footer>下来。
关于html - 页脚与开发控制台 View 一起出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54383384/