如何使Bootstrap粘性页脚内容去全页高度？ [英] How to make Bootstrap sticky footer content go full page height?

问题描述

我使用Boostrap示例为使用CSS的网站创建一个粘性页脚，这一切都很好，页面保持在页面底部的位置，因为页面调整大小。
在一些页面上，我有内容，需要显示几乎全页，禁止页脚。因此，网页的内容部分需要设置为100％的高度，因此其内容可以设置为完全高度。

I'm using a Boostrap sample to create a sticky footer for a web site using CSS, this all works fine the footer remains in place at the bottom of the page as the page is resized. On a number of pages I have content that needs to be shown practically full page, barring the footer. The content section of the page therefore needs to be set to 100% height so its content in turn can be sized to full height.

这是一个JSFiddle演示了这个问题。

我们如何使绿色容器div全高，所以它触及页面顶部和页脚的顶部在底部？

How can we make the green container div full height, so it touches the page top at the top and the top of the footer at the bottom?

谢谢！

<div id="wrap">
    <!-- Begin page content -->
    <div class="container">
        <div class="page-header">
            <h1>Sticky footer</h1>

        </div>
        <p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
        <p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
    </div>
    <div id="push"></div>
</div>
<div id="footer">
    <div class="container"></div>
</div>

---

---

#wrap .container {
    background-color: lightgreen;
}
/* Sticky footer styles  */
html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
    height: 60px;
}

#footer {
    background-color: #f5f5f5;
}

推荐答案

问题。我把它从JSFiddle移动到codepen，因为我更喜欢codepen。没有其他原因。
http://cdpn.io/IJHxf

I have the solution to your problem. I moved it from JSFiddle to codepen, because I like codepen better. No other reason. http://cdpn.io/IJHxf

这基本上是我从中得到答案，他们解释的方式比我更好。
http://v1.reinspire.net/blog/2005/ 10/11 / css_vertical_stretch /

This is essentially where I got the answer from, and they explain it way better than I ever could. http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/

当你实现那个答案的时候，我发现了 height：auto！important; 是为什么它不立即工作的罪魁祸首。在你的#wrap id中注释掉它，看看它是否充分的效果。代码笔有额外的变化，真正看到发生了什么。你真正需要让原始问题工作的是

When you implement that answer though, what I found height: auto !important; is the culprit as to why it doesn't immediately work. Comment it out in your #wrap id to see it take full effect. The code pen has additional changes to really see what is going on. What you really need to make your original question work is

#wrap .container {
    background-color: lightgreen;
    min-height: 100%;
    height: auto;  /* this line takes care of "more than enough content problem"  */
}


 html, body {
    height: 100%;
    background-color: #dedede;
    padding: 0;
    margin: 0;
}


 #wrap {
    min-height: 100%;
    /* height: auto !important; */
    height: 100%;
    margin: 0 auto -60px;
}

其实，你可以做，整个行 height：auto！important; 你可以直接取下！imporant 。例如

Actually, what you could do, and would make more sense is instead of commenting out the entire line height: auto !important; You could just take off the !imporant. For example

#wrap {
    height: auto !important;
    /* changed to */
    height: auto;
}

我改变了一些颜色，你会在代码中看到。

I changed some colors around to make it more apparent what was really happening. You'll see that in the codepen. There are lots more comments in the code pen to see what I really did FYI.

另外，我发现你的粘滞页脚给我的页面一个滚动条，因为边距。对我来说，我摆脱了下面的代码滚动条。

Also, I found that your sticky footer gave my page a scroll bar because of the margin. For me, I got rid of the scroll bar with the code below.

margin: 0 auto -60px;
/* changed to */
margin: 0 auto -80px;

这篇关于如何使Bootstrap粘性页脚内容去全页高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！