Блог

Вот пример того, что я получил до сих пор. Нажмите здесь

В моем 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;
  

Теперь я хочу установить боковую панель и содержимое на максимальную высоту, даже если в ней нет текста или какого-либо содержимого.. Любая помощь будет оценена. Спасибо!

Если вы согласны с 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);
});
  

Я бы не рекомендовал делать это с помощью JavaScript.

Это хорошо известная проблема в веб-дизайне. Для достижения этой цели вы можете использовать flex: fiddle

Оболочка творит волшебство:

 #wrapper { display: flex; }
  

Flexbox не поддерживается старыми браузерами. Прочитайте эту статью.