Question

我怎样才能使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>

Answer 1

我不相信没有使用JavaScript或jQuery就可以做到这一点。

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

出于这个原因，对于高度不同的内容使用绝对定位是有问题的（除了弹出窗口和下拉菜单之类的东西，它们不是主页面布局的一部分）。实际上，每个具有绝对定位的元素都是弹出窗口。

如果父母有position:absolute而不是孩子，则父母可以height:auto。

Answer 2

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

Answer 3

您也可以尝试

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

而不是div

关于绝对位置的CSS

3 个答案: