将div一直向下扩展[重复]答案

【问题标题】：extend div all way down [duplicate]将div一直向下扩展[重复]
【发布时间】：2011-11-14 09:32:04
【问题描述】：

可能重复：
How do I force a DIV block to extend to the bottom of a page even if it has no content?

我这里有一个 div，我想一直延伸到页面底部。

我想基本上一直向下扩展bottomHalf，无论分辨率如何，它都会一直向下。

我将height: 100%; 放入了bottomHalf，但它不起作用

  <div id="navigation">
 blah blah
  </div>


  <div id="bottomHalf">
EXTEND ALL THE WAY!!!
  </div>

CSS

#navigation {
    margin: 0 auto;
    width: 990px;
    height: 55px;
    background-image:url(images/bg.jpg);
    background-repeat:no-repeat;
}

#bottomHalf {
    margin: 0 auto;
    width: 990px;
    height: 100%;
    background-color: #4d3c37;
}

这是一个 jsiddle 示例

http://jsfiddle.net/3J9xd/

【问题讨论】：

我试过 min-height:100%;高度：100%；在我的包装器和 BottomHalf 中，但它不起作用
你能做一个jsFiddle 或JS Bin 测试用例来展示你目前的情况吗？
我们开始！！！ jsfiddle.net/3J9xd
无论屏幕分辨率如何，我都希望下半部分一直延伸到页面末尾
当#bottomHalf 中的文本过多而无法“显示在屏幕上”时会发生什么？那么页面是否应该有一个垂直滚动条？

标签： css html

【解决方案1】：

试试这个。

http://jsfiddle.net/thirtydot/zTWhn/

html, body, #wrapper {
    height: 100%;
}
#wrapper {
    margin: 0 auto;
    width: 990px;
    position: relative;
}
#navigation {
    height: 55px;
    background-color: #fff;
}
#bottomHalf {
    position: absolute;
    top: 55px;
    bottom: 0;
    width: 100%;
    background-color: #4d3c37;
}

【讨论】：

这不适用于较大的内容：jsfiddle.net/master1991/c0hdk4re
@Ingus：这并不是真正的“不起作用”，更像是“没有人指定应该发生什么”。您可以这样做，例如：jsfiddle.net/thirtydot/754s0vLw/1。或者你只是想制作一个粘性页脚？老实说，原始问题或您的评论中没有足够的细节。
这是真的！我必须让左侧导航栏一直需要到页面末尾。我在导航容器旁边有动态容器。

【解决方案2】：

你只需要添加

html, body{height:100%;}

并将你的 div 的高度设置为 100%

像这样：http://jsfiddle.net/3J9xd/1/

编辑：

这样更好吗：http://jsfiddle.net/3J9xd/5/

【讨论】：

现在它比页面多 200000 像素
你确定吗，在我这边我有 55px ......但我正在寻找另一个解决方案

【解决方案3】：

身高：100%；确实有效。由于包装类的高度，您没有看到它扩展。如果将包装类的高度设置为固定高度，您将看到bottomHalf div 扩展。

#wrapper {
    margin: 0 auto;
    width: 990px;
    height:500px;
}

#bottomHalf {
    margin: 0 auto;
    width: 990px;
    height: 100%;
    background-color: #4d3c37;
}

【讨论】：