html - 页脚不在底部-6ren

html - 页脚不在底部

转载作者：行者123 更新时间：2023-11-28 01:30:20

这似乎是有史以来最令人困惑的问题，至少对我而言。知道这个页面，除了标题之外是坏的 - 我已经复制了 HTML 并试图小心地删除 WordPress 相关的爵士乐所以你得到页面的 html。

JsBin Live Page

我希望您关注位于页面中间的页脚。我删除了 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>