首页 文章

即使有滚动条，也让div始终保持在页面内容的底部

提问于
浏览 次
217

CSS Push Div to bottom of page

请查看该链接，我想要相反：当内容溢出到滚动条时，我希望我的页脚始终位于页面底部 complete ，如Stack Overflow .

我有一个 id="footer" 和这个CSS的div：

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

但它所做的只是转到视口的底部，即使向下滚动也会停留在那里，因此它不再位于底部 .

图片：
Examlple

对不起，如果不澄清，我不希望它被修复，只是因为它在所有内容的实际底部 .

css positioning css-position footer

10 回答

  • 177

    这正是 position: fixed 的设计目的：

    #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

    这是小提琴：http://jsfiddle.net/uw8f9/

    回复于
  • 5

    不幸的是，你不能通过添加一些额外的HTML并让一块CSS依赖另一块来做到这一点 .

    HTML

    首先，您需要将 header ， footer 和 #body 包装成 #holder div：

    <div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

    CSS

    然后将 height: 100% 设置为 html 和 body （实际正文，而不是 #body div），以确保您可以将最小高度设置为子元素的百分比 .

    现在在 #holder div上设置 min-height: 100% ，这样它就会填充屏幕内容并使用 position: absolute 将页脚放在 #holder div的底部 .

    不幸的是，您必须将 padding-bottom 应用于与 footer 高度相同的 #body div，以确保 footer 不会位于任何内容之上：

    html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

    Working example, short body: http://jsfiddle.net/ELUGc/

    Working example, long body: http://jsfiddle.net/ELUGc/1/

    回复于
  • 2

    刚刚找到另一个解决方案，如上例所示，我有bug（某处错误） . 所选答案的变化 .

    html,body{
height: 100%
}

#nonFooter{
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}

    对于HTML布局

    <body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

    那么这种方式不支持旧浏览器，但旧浏览器可以接受滚动下载30px来查看页脚

    回复于
  • 12

    我意识到它说不要用它来“回答其他答案”，但遗憾的是我没有足够的代表在适当的答案（！）上添加评论但是......

    如果您在asp.net中遇到“My Head Hurts”答案时遇到问题 - 您需要在主生成的FORM标签以及HTML和BODY标签上添加“height：100％”以使其正常工作 .

    回复于
  • 4

    你没有关闭你的;位置后：绝对 . 否则你的上面的代码将完美地工作！

    #footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
    回复于
  • 3

    我会评论，如果我可以，但我还没有权限，所以我会发布一个提示作为答案，在一些Android设备上的意外行为：

    位置：固定仅适用于Android 2.1至2.3，使用以下元标记：

    <meta name="viewport" content="width=device-width, user-scalable=no">.

    见http://caniuse.com/#search=position

    回复于
  • 1

    这是一个使用viewport命令的直观解决方案，该命令只是将最小高度设置为视口高度减去页脚高度 .

    html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
    回复于
  • 1

    如果你有一个固定的高度页脚（例如712px）你可以使用js这样做：

    var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
    回复于
  • 1

    我通过将所有主要内容放在一个额外的div标签（id =“outer”）中解决了类似的问题 . 然后，我在最后一个“外部”div标签之外移动了id =“footer”的div标签 . 我用CSS来指定“外部”的高度，并指定“页脚”的宽度和高度 . 我还使用CSS将“footer”的margin-left和margin-right指定为auto . 结果是页脚牢牢地坐在我页面的底部并且也随页面滚动（尽管它仍然出现在“外部”div中，但是在主要的“内容”div之外很开心 . 这看起来很奇怪，但它是我想要的地方） .

    回复于
  • 455

    我只想补充一点 - 其他大多数答案对我来说都很好;然而，它需要很长时间才能让它们正常工作！

    这是因为设置 height: 100% 只能获取父div的高度！

    因此，如果您的整个html（正文内部）如下所示：

    <div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

    然后以下将是好的：

    html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

    ......因为“持有人”会直接从“身体”中获取它的高度 .

    感谢我的头部疼痛，他的答案是我最终开始工作的答案！

    However. 如果您的html更嵌套（因为它在某个列中的's only an element of the full page, or it'等），那么您需要确保每个包含的元素在div上也设置了 height: 100% . 否则，高度信息将在"body"和"holder"之间丢失 .

    例如 . 以下，我已经为每个div添加了“全高”类，以确保高度一直到我们的 Headers /正文/页脚元素：

    <div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

    并记得在css中设置全高等级的高度：

    #full-height{
    height: 100%;
}

    这解决了我的问题！

    回复于

相关问题