logo标签列表

页脚无法固定在底部

htmlcsstwitter-bootstrap
3
这似乎是有史以来最令人困惑的问题，至少对我来说是这样。知道这个页面除了标题栏之外是坏掉的 - 我已经复制了HTML并试图小心地删除WordPress相关的内容，以便您可以得到页面的HTML。

JsBin Live Page

我希望您关注位于页面中间的页脚。我删除了position:absolute 然后它有点向下移动... 它需要保持在页面底部。

这 是 position:fixed 这是唯一的方式，它会停留在底部，但是看看页脚是如何跟随你的？我不想要那个。

你可能会说，使用min-height: 100%。但我也不想要这样做，因为这样容器、行和列类的高度为100%就无法正常工作。

我想要实现的是：这种布局类型，但是你可以看到页脚上升了... < p > 是的，我也尝试过 position:relative：查看position:relative

所以，正如你所看到的，我链接给你的 Live 页面，根据我在互联网上阅读的所有内容，是实现这种布局类型的正确方式。但是我必须做错了什么...

更新1

在你建议我缺少 div 之前，我已经通过 div 检查器验证了所有 MY 示例的 div 是正确的。我没有漏掉任何 div。这是一个纯 CSS 问题

在你标记这个问题为 x，y 和 z 的重复之前，我已经提供了三个我尝试过的位置示例，但没有一个起作用：

最后，如上述，在包装器（或任何其他元素）上设置min-height: 100%不是一个可接受的答案，除非您可以说明我如何实现这种布局类型。

你需要兼容哪些浏览器？看看弹性盒子模型能为你做什么。如果IE10+对你来说可行，就选择它吧。 - Erick Petrucelli
3个回答
2
我通常的做法是在html中添加position: relative，在footer本身中添加position: absolute。
主要的缺点是你必须为body设置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>

查看结果 https://jsfiddle.net/jy0gsgm4/

0
从包装器中删除height:100%可以停止页脚下方的间距。这是因为总高度是100%的包装器和导航栏的高度。我建议将导航栏放入包装器div中。
0

我很喜欢这个方法。

display: inline-block;

相当简单易懂。HTML (演示)。
<div class="verycoolwrapper">

<!-- tons of cool stuff on page -->

    <footer id="footerstay">Blah | Blah2 | Hey | Click Here | Copyright 2090</footer>

</div><!-- // end wrapper -->

CSS: （演示）

.verycoolwrapper { 
    width: 960px;
    background: pink;
    margin: 0 auto;
    position: relative; // child elements relative to this, no height needed
}

#footerstay { 
   // your styles
   width: 100%;
   height: 150px;
   background: #ccc;
   display: inline-block;
}

此外，清除浮动也可以解决您的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接