Question

可能重复：
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/

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

Answer 2

您只需要添加

html，body {height：100％;}

并将div的高度设为100％

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

编辑：

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

Answer 3

身高：100％;确实有效。由于包装类的高度，你没有看到它延伸。如果将包装类的高度设置为固定高度，则会看到bottomHalf div扩展。

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

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

将div一直向下延伸

3 个答案: