Question

我有一个（小）问题。我试图给我的菜单栏的背景颜色，与我的主要内容div相同的高度，所以我认为我给div一个100％的高度，但这似乎没有工作，因为没有更多的内容使div的高度更高，我用我的意思做了一个例子（用jsfiddle制作）。我知道这是可能的，因为我以前做过这个。这是一个有点简单的问题，但你有那些日子，你可能会忘记任何事情。

   <!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <div id="wrapper">
            <div id="boxLeft">
                menu1 </br>
                menu2 </br>
                menu3 </br>
            </div>  
            <div id="boxMid">
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
            </div>
            <div id="boxRight">
            </div>              
        </div> 
    </body>
</html>

*{color:white;}
#wrapper{height:100% width:100%;}
#boxLeft{float:left; width:100px; height:100%; background-color:gray;}
#boxMid {float:left; width:400px; height:100%; background-color:blue; }
#boxRight{float:left; width:200px; height:50px; background-color:orange;}

http://jsfiddle.net/zEest/56/

感谢阅读，

Answer 1

看看：

Equal height columns

希望这对你有所帮助。顺便说一句，你可以使用jquery来确定自己准备好的高度。

$(document).ready(function(){ // event when DOM is ready.
  //sets the height of the boxes the same as the wrapper.
  $('#boxLeft, #boxRight').css('height',$('#wrapper').height());

});

要使您的包装器具有正确的高度，请使用以下命令：

<div id="wrapper">
        <div id="boxLeft">
            menu1 </br>
            menu2 </br>
            menu3 </br>
        </div>  
        <div id="boxMid">
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
        </div>
        <div id="boxRight">
        </div>
         <div style="clear:both;"></div>  
    </div>

随着css技巧的明确：两个包装高度都达到了他孩子的最大高度。

Answer 2

添加

body {  height: 100%;}
#wrapper{overflow:auto;}

的 DEMO 的

因为#wrapper元素中的所有元素都是浮动的，所以它们会从正常流中移除。以便为#wrapper添加{overflow:auto;}
提供高度

Answer 3

您可以使用jQuery实现此目的。简单的两步

$(document).ready(function() {
   var midHeight = $('#boxMid').height();
   $('#boxLeft').height(midHeight);
});

以下是 fiddle

给出widths百分比..如果你需要那些div彼此相邻。

干杯：）

没有内容的100％高度

3 个答案: