gpt4 book ai didi

CSS 动态高度

转载 作者:行者123 更新时间:2023-12-04 20:05:24 26 4
gpt4 key购买 nike

我有三个 div 标签,一个包装器和包装器内并排的两个:

<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>

我想创造一个条件,其中 <div id="left">标签高度可变,拉伸(stretch)包装器。

因此,<div id="right">将扩展到包装器变成的任何高度。

什么 CSS 可以实现这一点?谢谢!

最佳答案

也许我来晚了,但是用纯 CSS 做你描述的事情真的很简单。诀窍是让 #right 绝对定位并给它一个 topbottom 为 0。这将把它拉伸(stretch)到任何高度 #left 给出了 #wrapper。这是一个完整的工作示例 — #left 是绿色,#right 是蓝色,#wrapper 是红色,但从未见过,因为它被完全覆盖了通过 #left#right。尝试删除 bottom: 0; 行以查看没有它的情况。

<html lang="en">
<head>
<title></title>

<style type="text/css">
#wrapper {
background: #fdd;
position: relative;
width: 300px; /* left width + right width */
}

#left {
background: #dfd;
width: 200px;
}

#right {
background: #ddf;
bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
<p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
</div>
<div id="right">
<p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
</div>
</div>
</body>
</html>

关于CSS 动态高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1240652/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com