正确使用包装

Question

这是问题，

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

我有一个网页，其中包含一个分为3个不同项目的包装器。第一项是bootstrap导航。第二项是div（类col-lg-12 - ＆gt; bootstrap）。第三项是div（类col-lg-12 - ＆gt; bootstrap）。

导航栏始终位于页面顶部，非常完美。

问题是页脚必须始终位于页面的底部，我考虑绝对定位但不合适，包装器具有页脚应该尊重的一些样式属性。 AND，＃page元素必须适合nav和amp;之间的整个空间（高度）。页脚。我的意思是，即使#page元素中只有一个文本行，＃page height也必须适合所有可用空间。

还要注意#page div可以包含很多数据，因此，它的高度可以大于窗口高度（此时，包装器仍然包含所有，因为它具有最小高度100％attr，并且页脚应该仍然在#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类的混合...但是找不到任何修复它的解决方案......已经在堆栈上遇到了许多问题但是没有工作...... < / p>

这是实际的小提琴：

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

谢谢！

enter image description here

Answer 1

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

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

position: absolute;

然后在其他风格上修复一些。就像将position: relative;添加到包装器div一样，这会为页脚提供一个基于它的位置的引用。

修改

这里是一个体长很短的小提琴手： http://jsfiddle.net/NateW/0eepqj4m/93/

这是一个体长很长的小提琴手： http://jsfiddle.net/NateW/0eepqj4m/94/

另一个编辑

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

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

Answer 2

正确使用包装

Link to fiddle

这就是我如何解决它：
首先删除它：
的 CSS

body,html{ height:100%; }

您不希望将内容限制为视口大小（html高度100％）。

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

为此，我们只需添加：

#page { min-height: 50vh; }

然后即使其内容较小，它也会继续占用空间：D

Answer 3

您可以使用flexbox实现此目的。小提琴here

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;
}

将页脚粘贴到包装器的底部，并获得页面以适应导航和导航之间的整个空间。页脚

3 个答案:

正确使用包装