0

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

2 に答える 2

0

問題は、borderスタイルによって要素が拡張され、高さが変化することです。これを修正するには、を使用box-sizing: border-boxしてボックスモデルを変更し、パディングが幅の一部になるようにします。

http://jsfiddle.net/XyQB4/

于 2013-03-18T22:17:17.907 に答える
0

これが役立つかどうかはわかりませんが、Chromeでも同様の高さの問題が発生しました（他の場所では問題なく動作しました）。私がそれを機能させる方法は、DIV IDのHTMLコードでしたstyle="min-height: 660px"。つまり、必要な高さです。CSSにDIVIDのmin-heightまたはがありませんでした。height:auto私は持っています...body, html{height:100%; height:auto;}

于 2013-03-20T18:45:02.973 に答える