Div子没有在chrome或ie上将高度设置为100%答案

【问题标题】：Div child not setting height to 100% on chrome or ieDiv子没有在chrome或ie上将高度设置为100%
【发布时间】：2013-03-21 03:02:08
【问题描述】：

我有这个容器 div，它还有 2 个子 div，我希望具有“movablebartoggleswitch”类的 div 的高度是其容器 div 的 100%，这必须在 IE8 和 chrome 中工作，但它可以在一个或另一个，但不是两者都有，你能告诉我有什么问题吗？

<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;
}

【问题讨论】：

标签： html css internet-explorer google-chrome

【解决方案1】：

问题是border 样式导致元素扩展，使高度发生变化。要解决此问题，请使用 box-sizing: border-box 更改框模型以适应填充作为宽度的一部分

http://jsfiddle.net/XyQB4/

【讨论】：

或者我应该说导致元素扩展

【解决方案2】：

不知道这是否对您有帮助，但我在 Chrome 上遇到了类似的高度问题（在其他地方工作得很好）。我让它工作的方式是在 DIV id 的 HTML 代码中，我输入了style="min-height: 660px" - 或者你需要的任何高度。我的 DIV id 的 CSS 中没有 min-height 或 height:auto。我确实有...body, html{height:100%; height:auto;}

【讨论】：