Div的孩子沒有設置高度爲100％的鉻或即

我有這個容器div有2個更多的子div，我希望div類與「movablebartoggleswitch」具有其100％的集裝箱div的高度，這必須在IE8和Chrome中工作，但它可以在一個或另一個，但不是在兩個，可以告訴我什麼是錯的？Div的孩子沒有設置高度爲100％的鉻或即

<html> 
<head> 
<link href="styles.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div id="configdiv" class="maindiv"> 
<div class="simpletext">  
</div> 
<br/> 
<div name="containertoggleswitch" class="containertoggleswitch"> 
<div class="movablebartoggleswitch">   
</div> 
    <div class="bartoggleswitch">  
    </div> 
</div> 
</div> 
</body> 

</html> 

.maindiv 
{ 
background-color:#00ABA9; 
color:#FFF; 
position:absolute; 
width:250px; 
height:500px; 
font-family: 'Segoe UI'; 
font-weight: lighter; 
font-size:20; 
overflow-y:scroll; 
overflow-x:hidden; 
/*Works for all browsers except IE*/ 
overflow: -moz-scrollbars-vertical; 
} 
.simpletext 
{ 
width:100%; 
} 

.containertoggleswitch 
{ 
width:100px; 
height:30px; 
background-color:#FFF; 
position:relative; 
} 

.bartoggleswitch 
{ 
position :relative; 
color:#000; 
background-color:inherit; 
height:100%; 
width:100%; 
border-style:solid; 
border-width:5px; 
border-color:#FFABAF; 
} 

.movablebartoggleswitch 
{ 
clear:both; 
position:absolute; 
z-index:10; 
width:20%; 
height:100%; 
background-color:#000; 
float:left; 
}

來源

2013-03-18 user2184178

問題是，border樣式導致元素展開，使高度發生變化。爲了解決這個問題，使用box-sizing: border-box改變盒模型，以滿足填充是寬度

http://jsfiddle.net/XyQB4/

來源

2013-03-18 22:17:17 ashley

不，他們不'邊界'風格不添加填充... – BenM 2013-03-18 22:18:51

或我應該說，導致元素展開 – ashley 2013-03-18 22:19:49

不知道這是否會幫助你或沒有的一部分，但我也有類似的身高問題與Chrome瀏覽器（在別處工作正常）。我得到它的方式是在DIV ID的HTML代碼中，我把style="min-height: 660px" - 或者任何你需要的高度。我的DIV ID在我的CSS中沒有min-height或height:auto。我確實有... body, html{height:100%; height:auto;}

來源

2013-03-20 18:45:02 Judy

Div的孩子沒有設置高度爲100％的鉻或即

回答

相關問題