html - CSS height auto 在相对 DIV 中不起作用

Question

我有这段代码可以将 absolute div 显示为 relative div。

html:

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="relative">
                    <div class="absolute">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div>

                </div>
            </div>
            <div class="col-md-12">
               normal text added
            </div>    
        </div>
    </div>
</section>

CSS:

.relative {
    position: relative;
    height:auto;
    background-color:#e1e1e1;
}
.absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    width: auto;
    background-color:#f5f5f5;
    margin:0 15px;
}

实际上，当我为 relative div 设置 height:auto 时，这个 div 没有显示。如果我设置任何 height 值即:height:150px; relative div 它有效并显示为 true。我该如何解决这个问题？

演示 here

Answer 1

你不能用 css 做到这一点，需要用 position:relative 在你的外部 div 上设置高度为你的内心position:absolute以显示。

这是因为当你设置一个 <div>为position:absolute，外层容器不再有其宽高的概念，不会容纳其占用的空间。