Javascript 如何在没有内容的情况下将边栏和内容扩展到全高

这是我到目前为止得到的一个样本

在我的HTML中，我有以下内容：

最后在JS中：

function resize_bg_div(){
    var var_bg_offset = document.getElementById('header').offsetHeight;
    array_colHeights = new Array( );
    array_colHeights.push( document.getElementById("sideBarLeft").offsetHeight );
    array_colHeights.push( document.getElementById("centerColumn").offsetHeight );
    array_colHeights.push( window.innerHeight - var_bg_offset );
    array_colHeights.sort( function( a, b ){ } );
    document.getElementById('bg').style.height = array_colHeights[0] + "px";
    delete array_colHeights;
        delete var_bg_offset;
}


window.onload = resize_bg_div;
window.onresize = resize_bg_div;

---

现在，我想将侧栏和内容设置为最大高度，即使其中没有文本或任何内容。。任何帮助都将不胜感激。谢谢

我不建议使用JavaScript执行此操作

这是网页设计中一个众所周知的问题。 您可以使用flex来实现这一点：

包装器发挥了神奇的作用：

#wrapper { display: flex; }

---

旧浏览器不支持Flexbox。阅读。

如果您对jquery没有问题，请使用下面的代码

$(document).ready(function(){
    var header_height = $('#header').height();
    var content_height = $(window).height() - header_height;
    var container_height = $('#centerRightColumnContainer').height();
    var sidebar_height = $('#sideBarLeft').height();
    if(container_height > sidebar_height)
        var main_height = container_height;
    else
        var main_height = sidebar_height;
    if(content_height > main_height)
        var main_height = content_height;

    $('#centerRightColumnContainer,#sideBarLeft').css('height',main_height);
});

---

删除数组的高度；删除var_bg_偏移量；为什么？这不能回答我的问题。当我删除contentdiv中的文本时，包装会收缩。包装不会收缩。内容缩小了。一切都是红色的，对吗？给我一秒钟，这是一个棘手的问题。。对不起。好吧提前谢谢！我更新了我的答案。这应该给你一个想法。它适用于所有现代浏览器。希望能有帮助。谢谢你的努力，但这并不能再次回答我的问题。如果我从侧边栏和内容中删除文本，则不会显示div或background。我想要的结果是，我想看到div的背景颜色，很明显，div延伸到了底部，甚至没有内容。谢谢，但当我在标题上有内容时，它会溢出到边栏和内容区域，因为当窗口最小化时，标题区域会缩小或调整大小。谢谢，我现在改为自动，但我注意到，我无法获取浏览器的完整高度，有时刷新浏览器时，div bg颜色高度会发生变化。以及标题的文本，菜单移动。哇，哇，哇。不知道为什么。侧边栏高度超过我的浏览器高度，但谢谢。如果我来不了，我会回来找你的。谢谢先生如果我有更多的菜单内容，先生。如何动态获取浏览器高度？请参阅此$document.height中的菜单；以获取整页高度。

#wrapper { display: flex; }

$(document).ready(function(){
    var header_height = $('#header').height();
    var content_height = $(window).height() - header_height;
    var container_height = $('#centerRightColumnContainer').height();
    var sidebar_height = $('#sideBarLeft').height();
    if(container_height > sidebar_height)
        var main_height = container_height;
    else
        var main_height = sidebar_height;
    if(content_height > main_height)
        var main_height = content_height;

    $('#centerRightColumnContainer,#sideBarLeft').css('height',main_height);
});