如何即使沒有內容也將側邊欄和內容擴展到最大高度

Question

這是到目前為止我得到的樣本。 點擊這里

在我的HTML中，我有這個：

<div id="mainContainer">

    <div id="header">

        <p>header here</p>
            </div>

            <div id="centerRightColumnContainer">

                <div id="centerRightColumnPositioner">

                    <div id="centerColumnContainer">

                        <div id="centerColumn">

                            <p>menu here</p>


                        </div>

                    </div>

                </div>  

            </div>

            <div id="sideBarLeft">
                <p>side bar</p>
            </div>                  
</div>

在我的CSS中，我有：

    body
    {
    margin: 0;
    padding: 0;
    height: 100%;
    }
#bg
    {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 960px;
    z-index: -1;
    }

body > #bg
    {
    position: relative;
    z-index: 1;
    }

#mainContainer
    {
    position: relative;
    min-width: 960px;
    top: 0;
    left: 0;
    z-index: 2;
    }

#header
        {
        background-color: black;
        margin: 0;
        padding: 10px;
        }

#centerRightColumnContainer
    {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    }

#centerRightColumnPositioner
    {
    margin-left: 190px; 
    padding: 0; 
    }

#sideBarLeft
    {
    float: left;
    width: 190px;
    margin-left: -100%;
    padding: 0;
    background-color : maroon;
    }

#centerColumnContainer
    {
    float: left;
    width: 100%;
    background-color : gray;
    }

#centerColumn
    {
    /* margin-right: 260px; */
    padding: 10px;
    }



body
        {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 13px;
        line-height: 17px;
        margin: 0;
        padding: 0;
        }

p
        {
        margin-top: 0px;
        margin-bottom: 20px;
        }

.clear_both
        {
        clear: both;
        }

#sideBarLeft p
    {
    margin: 10px auto;
    width: 170px;
    }


#rightColumnBg > #sideBarLeft
    {
    height: auto;
    }

最后在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;

現在，我想將側欄和內容設置為最大高度，即使其中沒​​有文本或任何內容也是如此。任何幫助將不勝感激。 謝謝！

Answer 1

如果您對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);
});

Answer 2

我不建議使用JavaScript進行此操作。

這是網頁設計中的一個眾所周知的問題。 您可以使用柔性來實現這一目標： 小提琴

包裝器起到了神奇的作用：

#wrapper { display: flex; }

舊版瀏覽器不支持Flexbox。 閱讀本文 。