我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。
当前回答
大多数答案使用固定值的css。虽然它可能工作，但当页脚更改时，需要调整页脚大小的固定值。另外，我使用的是WordPress，不想打乱WordPress主题为你定义的页脚大小。
我用一点javascript解决了这个问题，只在需要时触发。
var fixedFooter = false;
document.addEventListener("DOMContentLoaded", function() {fixFooterToBottom();}, false);
window.addEventListener("resize", function() {fixFooterToBottom();}, false);
function fixFooterToBottom()
{
var docClientHeight = document.documentElement.clientHeight;
var body = document.querySelector("body");
var footer = document.querySelector("footer");
fixedFooter = fixedFooter ? (body.clientHeight + footer.clientHeight ) < docClientHeight : body.clientHeight < docClientHeight;
footer.style.position = fixedFooter ? "fixed" : "unset";
footer.style.left = fixedFooter ? 0 : "unset";
footer.style.right = fixedFooter ? 0 : "unset";
footer.style.bottom = fixedFooter ? 0 : "unset";
}
其他回答
由于Grid解决方案还没有给出，下面是它，如果我们将height: 100%和margin: 0视为理所当然，则只对父元素进行了两个声明:
html, body {height: 100%} body { display: grid; /* generates a block-level grid */ align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */ margin: 0; } .content { background: lightgreen; /* demo / for default snippet window */ height: 1em; animation: height 2.5s linear alternate infinite; } footer {background: lightblue} @keyframes height {to {height: 250px}} <div class="content">Content</div> <footer>Footer</footer>
align-content:之间的空间
项目沿对齐容器均匀分布 横轴。每对相邻项之间的间距为 相同。第一项与主启动边齐平，最后一项与主启动边齐平 项目与主端边缘齐平。
查看http://1linelayouts.glitch.me/，示例4。Una Kravets解决了这个问题。
这将创建一个带有页眉、主页和页脚的3层页面。
-你的页脚将始终停留在底部，并使用空间来适应内容;
-你的标题将始终保持在顶部，并使用空间来适应内容
-你的主系统总是会使用所有可用的剩余空间(剩余的部分空间)，如果需要，足够填满整个屏幕。
HTML
<div class="parent">
<header class="blue section" contenteditable>Header</header>
<main class="coral section" contenteditable>Main</main>
<footer class="purple section" contenteditable>Footer Content</footer>
</div>
CSS
.parent {
display: grid;
height: 95vh; /* no scroll bars if few content */
grid-template-rows: auto 1fr auto;
}
你可以使用position: absolute following将页脚放在页面的底部，但要确保你的两列有适当的边距-底部，这样它们就不会被页脚遮挡。
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
我没有任何运气在这一页上建议的解决方案，但最后，这个小技巧成功了。我将把它作为另一种可能的解决方案。
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
保持<main>为min-height 90vh将永远解决您的问题。 下面是基本结构，它将帮助您遵循语义并覆盖整个页面。
第一步:除了页眉和页脚，所有内容都放在主标签内。
<body>
<header>
<!╌ nav, logo ╌>
</header>
<main>
<!╌ section and div ╌>
</main>
<footer>
<!╌ nav, logo ╌>
</footer>
</body>
步骤2:添加min-height: 90vh为主
main{
min-height: 90vh;
}
通常，页眉和页脚的最低高度是70px，所以这种情况下工作良好，尝试和测试!
