gpt4 book ai didi

html - Div child 未在 chrome 或 ie 上将高度设置为 100%

转载 作者:行者123 更新时间:2023-11-28 13:11:24 26 4
gpt4 key购买 nike

我有这个容器 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;
}

最佳答案

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

http://jsfiddle.net/XyQB4/

关于html - Div child 未在 chrome 或 ie 上将高度设置为 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15487794/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com