关于绝对位置的 CSS答案

【问题标题】：CSS about absolute position关于绝对位置的 CSS
【发布时间】：2013-02-22 22:21:30
【问题描述】：

我怎样才能使 div（容器）具有高度：自动，而不是使其具有固定高度

        .container{
        width:auto;
        height:auto;
        background-color:black;
        position:relative;
    }

    .text {
        position:absolute;
        width:50px;
        height:50px;
        background-color:red;
    }

<div class='container'>
        <div class='text'>

        </div></div>

【问题讨论】：

我认为这不适用于 css，因为“文本”是绝对的，就像在“其他维度”中一样，而“容器”不知道它的维度。也许包括一些 JavaScript 来获取“文本”大小，并将该大小（高度）应用于“容器”。

标签： html css styles stylesheet

【解决方案1】：

只要写height:100%;它就会将div的高度设置为文本的大小+边距

【讨论】：

【解决方案2】：

你也可以试试

<p class="text">
    Lorem ipsum dolor sit amet ...
</p>

而不是 div

【讨论】：

【解决方案3】：

我不相信不使用 JavaScript 或 jQuery 有办法做到这一点。

当一个元素有position:absolute 时，它不会占用父元素内部的空间。它与页面的布局和流程分开（如弹出窗口）。在上面的示例中，父级的高度为零，因为它没有占用空间。这是绝对定位行为的基本部分。

因此，对高度变化的内容使用绝对定位是有问题的（弹出窗口和下拉菜单之类的内容不属于主页布局的一部分）。实际上，每个具有绝对定位的元素都是一种弹出窗口。

如果父级有position:absolute 而不是子级，那么父级可以有height:auto。

【讨论】：