这似乎是有史以来最令人困惑的问题，至少对我而言。知道这个页面，除了标题之外是坏的 - 我已经复制了 HTML 并试图小心地删除 WordPress 相关的爵士乐所以你得到页面的 html。
我希望您关注位于页面中间的页脚。我删除了 position:absolute 并且它有点向下移动......它需要留在页面底部。
这is position:fixed这是它留在底部的唯一方法，但是看看页脚是如何跟随你的？ 我不想要那个。
您可能会说，执行 min-height: 100% 这也不是我想要的，因为这样高度为 100% 的容器、行和列类将不起作用。
我想要完成的是:this type of layout.但是正如您所见，页脚向上移动...
是的，我也尝试过 position:relative: check out position:Relative
所以你可以看到我也链接了你的实时页面，从我在互联网上读到的所有内容来看，这是实现 this type of layout. 的正确方法。 ，我怎么一定做错了什么......
更新1
在您建议我缺少 div 之前，我已经通过 div 检查器验证了我的所有示例，并且 div 是正确的。我没有遗漏任何 div。这是一个纯 css 问题
在您将其标记为 x、y 和 z 的副本之前 - 我已经提供了三个我尝试过的位置示例，但都没有奏效:
- position:absolute
- position:relative
- position:fixed - 不是我想要的。页脚必须位于页面底部。
最后，如包装(或任何其他元素)上所述，min-height: 100% 不能作为答案接受，除非您可以指定我如何实现 this type of layout.
最佳答案
我通常这样做的方式是添加 position: relative 到 html 和 position: absolute 到页脚本身。
主要缺点是必须为正文设置 margin-bottom=footer-height
<!doctype html>
<html>
<head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 100px; // is equal to footer height
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="footer">footer</div>
</body>
</html>
关于html - 页脚不在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30485839/