Question

我在没有高度的情况下有一个绝对定位的div。

我需要确保孩子＆＃34;填充＆＃34;父级内部的可用高度空间，如果这是正常工作，则将具有红色背景：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>

Answer 1

如果你想要100％父母的身高，那么你所需要的就是：

div.content {
width:100%; /* or left:0; right:0; */
top: 0;
bottom: 0; /* same as height:100% */
position: absolute;
background: red;

}

但如果您的部分没有任何高度，您可以尝试这种技术：

section {
    display:table;
    width: 600px;
}
div.content {
    display:table-cell;
    background: red;
}

Answer 2

您没有为section元素指定高度。因此section元素有height: 0。

因此div.content height: 100%会导致height: 0。

请勿在{{1}} CSS中包含height属性。

尝试：

div.content

DEMO

在父母身上绝对没有高度定位孩子

2 个答案: