1

我有一个（小）问题。我试图给我的菜单栏的背景颜色，与我的主要内容 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>

​</p> 

*{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/

谢谢阅读，

4

3 回答 3

2

看一眼：

等高列

希望这对你有帮助。顺便说一句，您可以使用 jquery 来修复 dom 准备好的高度。

$(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 技巧明确：两个包装器高度都获得了他孩子的最大高度。

于 2012-12-17T13:15:04.197 回答
1

只需添加

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

演示

由于元素中的所有#wrapper元素都是浮动的，因此它们从正常流中移除。所以给#wrapper添加高度{overflow:auto;}

于 2012-12-17T12:59:21.607 回答
1

您可以通过使用 jQuery 来实现这一点。简单的两步

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

这是小提琴

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

干杯:)

于 2012-12-17T13:02:39.897 回答