拉伸 div 以适应绝对定位的内容

Question

有没有办法只用 css 而不用脚本来做到这一点？ 我有一个具有最小宽度的 div，其内部是一个绝对定位的内部 div，具有动态生成的可变宽度内容。 有时内容会超出包含的 div，但由于其绝对定位，因此不会拉伸包含的 div。 我如何让它拉伸包含的div？ 谢谢

Answer 1

如果您的内容元素有

position: absolute

，则不可能。但是，有时您可以避免绝对定位，但通过使用浮动元素来获得所需的结果。请参阅这个答案到一个非常相似的问题作为示例。

Answer 2

另一种方法是使用 Grid 代替位置：“absolute”。

这将确保容器适合您想要放置内容的区域。

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

稍后将内容分配给该区域，如下所示。如果使用positionrelative，仍然可以使用top、left、right、bottom属性；它们的行为绝对适合容器，并且容器将适合内容；

.child {
    grid-column: 1;
    grid-row: 1;

    position: relative;
    top: 20px;
} 

Answer 3

技巧是将绝对 div 设置为具有完整的宽度和高度：

position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
width: 100vw;
height: 100vh;

（可以减小宽度和高度以防止元素溢出页面。）

然后你可以将一个子级的div放入绝对定位的div中，它会根据需要增长。

为了防止子级 div 适合父级 div，您可以将其添加到绝对定位的 div 中：

display: flex;
align-items: flex-start;

然后孩子们会最小化它的宽度，同时仍然能够增长。

Answer 4

尝试参考我制作的这个 JSfiddle。 http://jsfiddle.net/gA7mB/ 如果我没看错的话，这基本上就是您要找的东西。

HTML

<div class="container">
    <div class="relative">
        <div class="absolute">
            <h1>I am Content i can be as long as you wish. it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</h1>
        </div>
    </div>
</div>​

CSS

.container {
    width: 500px;            
}

.relative {
    position: relative;
    background: #666;
    min-width: 200px;
    min-height: 200px;
}

.absolute {
    position: absolute;
    background: #999;
    top: 20px;  /* not important, just to show absolute position */
    left: 20px; /* not important, just to show absolute position */ 
}