Question

以下是我到目前为止的样本。 Click Here

在我的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。

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

包装器具有魔力：

#wrapper { display: flex; }

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

即使没有内容，如何将侧边栏和内容扩展到全高

2 个答案: