Javascript 无法将div扩展到页面底部。包括jsFiddle_Javascript_Jquery_Css

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

javascript jquery css

Javascript 无法将div扩展到页面底部。包括jsFiddle,javascript,jquery,css,Javascript,Jquery,Css,无法将左、右div扩展到页面底部时，不能再多也不能少这是我的工作。谢谢，戴尔检查：您需要指定根元素的高度参考：该值是根据车辆的高度计算的包含块。如果包含块的高度不正确明确指定后，该值将自动计算。高度百分比在根元素上（例如）相对于视口检查：您需要指定根元素的高度参考：该值是根据车辆的高度计算的包含块。如果包含块的高度不正确明确指定后，该值将自动计算。高度百分比在根元素上（例如）相对于视口您必须说，body和html标记也100%像这样： html, body

无法将左、右div扩展到页面底部时，不能再多也不能少

这是我的工作。

谢谢，戴尔检查：

您需要指定根元素的高度

参考：

该值是根据车辆的高度计算的包含块。如果包含块的高度不正确明确指定后，该值将自动计算。高度百分比在根元素上（例如）相对于视口

检查：

您需要指定根元素的高度

参考：

该值是根据车辆的高度计算的包含块。如果包含块的高度不正确明确指定后，该值将自动计算。高度百分比在根元素上（例如）相对于视口

您必须说，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;

}

您必须说，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;

}

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

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

html:


你好
左边
正确的

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

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

html:


你好
左边
正确的

谢谢。你把我带到了我最初的问题。原来的问题是，左侧和右侧div现在超出了页面的范围。在不知道顶部div的高度的情况下，如何防止这种情况发生？我需要使用javascript吗？@Dale添加

overflow-y:hidden有帮助吗

（或

溢出：隐藏；

overflow-y:hidden有帮助吗

（或

溢出：隐藏；

）到您的左右div？，使用碎纸机更新溢出：隐藏使解决方案完整。不错。这个解决方案的问题是，有时div的内容会超过正文大小，我需要滚动条。也许一个最小高度就行了？我会玩的，但我怀疑那会起作用。我觉得我需要js。你当然是对的，事实上，你说得很对，但是关于如何正确地做到这一点，我已经没有答案了。顺便说一句，如果你去掉上面的div，一切都很好。也许这是解决问题的办法。谢谢。左边和右边的div现在超出了页面，这实际上是我最初的问题。在不知道顶部div的高度的情况下，如何防止这种情况发生？我需要使用javascript吗？如果是这样的话，这就是我需要听到的。如果它们超出了你的内容的其余部分，你必须添加一个具有更高值的z索引。如果您希望左、右div始终位于顶部，您可以给它们：z-index:9999；为什么要添加z-index帮助？如果你需要，它会让你的div保持在其他上下文的前面？我需要左右div停在页面底部，防止滚动条。div不应该重叠，所以我不需要z索引。谢谢。左边和右边的div现在超出了页面，这实际上是我最初的问题。在不知道顶部div的高度的情况下，如何防止这种情况发生？我需要使用javascript吗？如果是这样的话，这就是我需要听到的。如果它们超出了你的内容的其余部分，你必须添加一个具有更高值的z索引。如果您希望左、右div始终位于顶部，您可以给它们：z-index:9999；为什么要添加z-index帮助？如果你需要，它会让你的div保持在其他上下文的前面？我需要左右div停在页面底部，防止滚动条。div不应该重叠，所以我不需要z索引。太好了！谢谢假设我需要重新计算，如果窗口在加载后被调整大小？@Dale Np。是的，当页面内容更新时，你可能需要运行这个。太好了！谢谢假设我需要重新计算，如果窗口在加载后被调整大小？@Dale Np。是的，每当页面内容更新时，您可能必须运行此操作。