延长的div一路下跌

可能重复：
How do I force a DIV block to extend to the bottom of a page even if it has no content?延长的div一路下跌

我有一个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/

来源

2011-11-14 Eric Arsmeinz

我试图最小高度：100％; 身高：100％;在我的包装和BottomHalf中，但它的剂量工作 –

你可以做一个[jsFiddle]（http://jsfiddle.net/）或[JS斌]（http://jsbin.com/）测试案例显示你有什么远？ – thirtydot

我们走吧！ http://jsfiddle.net/3J9xd/ –

你只需要添加

HTML，体{身高：100％;}

而且把你div的高度为100％

喜欢这个：http://jsfiddle.net/3J9xd/1/

编辑：

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

来源

2011-11-14 01:12:01 GregM

现在它只是像20万像素比页面 –

你确定，在我身边我有55px ...但我正在寻找另一个解决方案 – GregM

看看编辑 – GregM

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

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

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

来源

2011-11-14 01:20:10 Aaron

试试这个。

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

来源

2011-11-14 01:32:04 thirtydot

延长的div一路下跌

回答

相关问题