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

【问题标题】：Position child absolutely without a height on the parent将孩子定位在父母身上绝对没有高度
【发布时间】：2014-08-27 21:30:05
【问题描述】：

我在没有高度的 a 中有一个绝对定位的 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>

【问题讨论】：

不要为 div.content 指定高度属性，它会起作用
是的，不要给它高度：100%；因为那是 100% 什么都没有。
jsfiddle.net/AvSr9/6
我认为我运行的砌体脚本（在生产版本上）引起了问题。是时候重新考虑了！感谢您的帮助

标签： html css position height

【解决方案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;
}

【讨论】：

【解决方案2】：

您没有为 section 元素指定高度。所以section 元素有height: 0。

所以在div.content height: 100% 会导致height: 0。

只是不要在div.content CSS 中包含高度属性。

试试：

div.content {
    width: 100%;
    top: 0;
    position: absolute;
    background: red;
}

DEMO

【讨论】：