如何扩展边栏和内容到全高，即使没有内容 [英] How to extend sidebar and content to full height even without content

问题描述

这里是我到目前为止的一个例子。 请点击这里

在我的HTML中，我有这个：

 < div id =mainContainer> 
 
< div id =header> 
 
< p>标头这里< / p> 
< / div> 
 
< div id =centerRightColumnContainer> 
 
< div id =centerRightColumnPositioner> 
 
< div id =centerColumnContainer> 
 
< div id =centerColumn> 
 
< p>菜单在这里< / p> 
 
 
< / div> 
 
< / div> 
 
< / div> 
 
< / div> 
 
< div id =sideBarLeft> 
< p>侧栏< / p> 
< / div> 
< / div> 
  
 
 
 
 
 
 
 
 
  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）; 
}）; 
  
 
Here is a sample of what I got so far. Click Here

In my HTML, I have this :
    
<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>


In my css i have : 
    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;
    }
lastly in 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;
Now, I want to set the side bar and the content to maximum height even when it has no text or any content in it.. Any help would be appreciated. Thanks!
解决方案
If you are ok with jquery than use below code...
$(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);
});


                        
这篇关于如何扩展边栏和内容到全高，即使没有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！