我的问题是,如果你不能事先知道父div的大小,有没有办法,不使用JavaScript,导致子div延伸到其父级的边界,而不超过这些边界？
下面是演示我的问题的示例标记/样式.如果将其加载到浏览器中,您将看到它#two并且#three都延伸到其父级之外#one,并导致滚动条出现.
我的问题不在于滚动条,而是我不知道如何告诉子div占用剩余的宽度或高度,而不是父级的全高或宽度.
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
小智 22
我有一个类似的问题,但在我的情况下,我在我的div中有内容,高度方面将超过父div的边界.当它,我希望它自动滚动.我能够通过使用来实现这一目标
.vscrolling_container { height: 100%; overflow: auto; }
在你的例子中,你不能:将5px margin它添加到边界框div#two并div#three有效地使它们的宽度和高度为父+ 5px的100%,这将溢出.
您可以padding在父元素上使用以确保5px其边框内有空间:
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
#one {padding:5px;width:500px;height:300px;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
编辑:在测试中,删除width:100%from div#two将实际上让它正常工作,因为divs是块级别,并且默认情况下将始终填充其父级的宽度.如果你想使用保证金,这应该清除你的第一个案例.
通常使用两种技术:
鉴于您在此提供的HTML是使用绝对定位的解决方案:
body #one {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}
body #two {
width: auto;
}
body #three {
position: absolute;
top: 60px;
bottom: 0;
height: auto;
}<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body尽管有共同的批评,你总是可以直接使用table,tr和td元素,因为它可以完成工作.如果你更喜欢使用CSS,那么没有colspan的等价物,所以你最终可能会遇到嵌套表.这是一个例子:
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#one {
box-sizing: border-box;
display: table;
height: 100%;
overflow: hidden;
width: 100%;
border: 1px solid black;
}
#two {
box-sizing: border-box;
display: table;
height: 50px;
padding: 5px;
width: 100%;
}
#three {
box-sizing: border-box;
display: table;
height: 100%;
padding-bottom: 60px;
padding-left: 5px;
}
#four {
display: table-cell;
border: 1px solid black;
}
#five {
display: table-cell;
width: 100px;
border: 1px solid black;
}
#six {
display: table-cell;
}<html>
<div id="one">
<div id="two">
<div id="four"></div>
</div>
<div id="three">
<div id="five"></div>
<div id="six"></div>
</div>
</div>
</html>你可以使用继承
#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}