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

vdgimpew  于 2022-12-27  发布在  其他
关注(0)|答案(4)|浏览(170)

有没有一种方法可以只使用css而不使用脚本来实现这一点?我有一个最小宽度的div,它里面是一个绝对定位的内部div,动态生成了可变宽度的内容。有时内容会扩展到包含的div之外,但由于它是绝对定位的,所以不会拉伸包含的div。我如何让它拉伸包含的div?谢谢

rta7y2nd

rta7y2nd1#

如果您的内容元素具有position: absolute,则不可能执行此操作。但是,有时您可以使用浮动元素来避免绝对定位,并获得所需的结果。有关示例,请参见**this answerto avery similar question**。

vc6uscn9

vc6uscn92#

尝试参考这个JSfiddle我做的。http://jsfiddle.net/gA7mB/如果我读对了,这基本上是你正在寻找的。
超文本标记语言

<div class="container" >
<div class="relative" >
    <div class="absolute" >

        <h1>I am Content i can be as long as you wish. t 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>

中央支助系统

.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 */ 
}
ar5n3qh5

ar5n3qh53#

诀窍是将绝对div设置为全宽和全高:

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

(You可以减小宽度和高度,以防止元素溢出页面。)
然后你可以把一个孩子的div放到绝对位置的div中,它会根据需要增长。
要防止子div适合父div,可以将此添加到绝对定位的div:

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

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

kwvwclae

kwvwclae4#

另一种方法是使用Grid代替position:“绝对的”。
这将确保容器适合你想要放置内容的区域。

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

稍后你将内容分配到区域中,如果你使用相对位置,你仍然可以使用top,left,right,bottom属性;它们将绝对地对容器起作用,并且容器将适合内容物;

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

    position: relative;
    top: 20px;
}

相关问题