我在一个没有高度的绝对位置内有一个div。
我需要确保子级“填充”父级内部的可用高度空间,即,如果此方法正常运行,它将具有红色背景:http : //jsfiddle.net/richardblyth/AvSr9/
(这是对我正在从事的客户项目的要求的改编...)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>A Blank HTML Doc</title>
<style type="text/css">
section {
position: relative;
width: 600px;
}
div.content {
height: 100%;
width: 100%;
top: 0;
position: absolute;
background: red;
}
</style>
</head>
<body>
<section>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula urna sit amet nibh facilisis, vitae feugiat felis imperdiet. Nunc facilisis ac tortor at rutrum. Fusce ligula sem, vehicula a sapien in, iaculis faucibus nulla. Nam faucibus feugiat ante, et ornare turpis aliquam vel. Donec non semper velit. Pellentesque vehicula enim lacinia, sagittis neque et, lobortis sapien. Quisque bibendum elementum nunc. Phasellus ac tincidunt tellus.</div>
</section>
</body>
</html>
您没有为section
元素指定高度。所以section
元素有height: 0
。
所以在div.content
height: 100%
会导致height: 0
。
只是不要在div.content
CSS中包含height属性。
尝试:
div.content {
width: 100%;
top: 0;
position: absolute;
background: red;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句