100％无内容高度

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

<!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/

感谢您的阅读，

来源

2012-12-17 Mr chinpansee

尝试最小身高：100％而不是身高：100％ –

这样做的工作，Ive littarly尝试过任何事情，大声笑 –

看看：

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技巧明确：既THRE包装高度得到他的孩子的最大高度。

来源

2012-12-17 13:15:04 Patrick

你能否详细说明你的答案？ –

编辑，希望现在更清楚 – Patrick

谢谢，这确实有效，我不需要明确：都谢谢大家的帮助！ –

只需添加

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

DEMO

如#wrapper元件所有的元件被浮动，从而它们被从正常流中去除。所以给予身高#wrapper加{overflow:auto;}

来源

2012-12-17 12:59:21 Champ

也谢谢！但是这不适用于网站，也不是由我创建的，所以我不知道他所做的问题。 –

你可以给我们的网站链接？ – Champ

我可以向你发送个人信息吗？ –

你可以通过使用jQuery来实现。简单的两个步骤

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

这里是fiddle

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

干杯:)

来源

2012-12-17 13:02:39

谢谢！将这样做 –

你是最受欢迎的:) –

哦，亲爱的，这似乎并不完美，你还在吗？ –

100％无内容高度

回答

相关问题