Question

无法将左右div延伸到页面底部，不能再少了。

谢谢，戴尔

Answer 1

这是你的js解决方案，先生：

//Can place js in <head> tag
$(document).ready(function(){
    var remHeight = $('html').height() - $('#top').height();
    $('#left').css('height', remHeight);
    $('#right').css('height', remHeight);
});

的CSS：

body, html
{
    height: 100%;
}
.top {
    background: red;
}
.left {
    width: 25%;
    background: grey;
    float: left;
}
.right {
    width: 25%;
    background: blue;
    float: left;
}

HTML：

<html>
<body>
    <div id="top" class="top">
        <div id="msg">hello</div>
    </div>
    <div id="left" class="left">
        left
    </div>
    <div id="right" class="right">
        right
    </div>
</body>
</html>

http://jsfiddle.net/zTEhB/

Answer 2

检查：http://jsfiddle.net/5gqNn/

您需要指定根元素的高度。

参考： https://developer.mozilla.org/en/CSS/height

是根据高度来计算的包含块。如果包含块的高度不是明确指定，值计算为auto。百分比高度根元素（例如）相对于视口。

Answer 3

你必须说body和html标签也是100％这样：

html, body{
    height:100%;
    position: relative;}
.top {
    background: red;
}
.left {
    position: relative;
    width: 25%;
    height: 100%;
    background: grey;
    float: left;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; 
}
.right {
    position: relative;
    width: 25%;
    height: 100%;
    background: blue;
    float: left;

}

无法将div扩展到页面底部。 jsFiddle包括在内

3 个答案: