将页脚粘贴到包装底部，并让页面适合导航和页脚之间的整个 space

Question

问题来了，

我正在使用 bootstrap，我遇到了这个问题：

我有一个网页，包含一个包装器 dividid in 3 distinct items。第一项是 bootstrap 导航。第二项是 div (class col-lg-12 -> bootstrap)。第三项是 div (class col-lg-12 -> bootstrap).

导航栏总是在页面顶部，完美。

问题是页脚必须始终位于页面底部，我考虑过绝对定位但不适合，包装器有一些页脚应该遵守的样式属性。并且，#page 元素必须适合导航和页脚之间的整个 space（高度）。我的意思是，即使 #page 元素中只有 1 个文本行，#page 高度也必须适合所有可用的 space。

还要考虑#page div 可以包含许多数据，因此它的高度可以大于 window 高度（此时，wrapper 仍然包含所有数据，因为它有最小高度 100% 属性，页脚仍应位于#page 元素下方...)

<body>
    <div id="wrapper">
        <nav></nav> <!--bootstrap item-->
        <div id="page" class="col-lg-12"></div> <!--bootstrap class-->
        <div id="footer" class="col-lg-12"></div> <!--bootstrap class-->
    </div>
</body>

样式实际上是这样的：

<style>
    body,html{
        height:100%;
    }
    #wrapper{
        min-height:100%;
        border:2px solid red;
    }
    #page{
        border:2px solid blue;
    }
    #footer{
        border:2px solid green;
        position:relative;
        bottom:0;
        margin-top:20px;
        margin-bottom:15px;
        height:120px;
    }
</style>

我认为问题来自自定义 css 和 bootstrap classes 的混合...但找不到任何解决方案来修复它...已经解决了通过堆栈上的许多问题，但没有工作...

这是实际的 fiddle :

http://jsfiddle.net/0eepqj4m/18/

谢谢！

Answer 1

如果你愿意使用绝对定位，这会更容易。

只需将此添加到您的页脚：

position: absolute;

然后在其他样式上修复一些。就像将 position: relative; 添加到包装器 div 一样，这为页脚提供了一个参考，以参考它的位置。

编辑

这是一个短小的 jsfiddle： http://jsfiddle.net/NateW/0eepqj4m/93/

这是一个长体长的jsfiddle： http://jsfiddle.net/NateW/0eepqj4m/94/

另一个编辑

如果你想使用 jQuery 使用这样的东西...... http://jsfiddle.net/NateW/0eepqj4m/92/

我修改了这个 SO 问题的答案：set div height using jquery (stretch div height)

Answer 2

您可以使用 flexbox 实现此目的。 Fiddlehere

body,html{
height:100%;
}
.navbar {
  height:auto;
  flex-shrink:1;
}
#wrapper{
  border:2px solid red;
  min-height:100%;
  padding:2%;
  display:flex;
  flex-direction:column;
 }
 #page{
  border:2px solid blue;
  flex-grow: 5;
}
#footer{
  margin-top:20px;
  position:relative;
  border:2px solid green;
  flex-grow:2;
}

Answer 3

包装恰到好处

Link to fiddle

我会这样解决：
首先删除这个：
css

body,html{
    height:100%;
}

您不想将您的内容限制在视口的大小（html 高度 100%）。

（这几乎解决了它）现在它可以处理除小内容以外的大部分内容，因为整个包装器都太小了。

为此我们只需添加：

#page {
    min-height: 50vh;
}

那么它将继续占用 space 即使它的内容更小 :D

将页脚粘贴到包装底部，并让页面适合导航和页脚之间的整个 space

Stick footer to bottom of wrapper, and get page to fit the whole space between nav & footer

html

css

footer

twitter-bootstrap

包装恰到好处