我有三个 div 标签，一个包装器和包装器内并排的两个:
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
我想创造一个条件，其中 <div id="left">标签高度可变，拉伸(stretch)包装器。
因此，<div id="right">将扩展到包装器变成的任何高度。
什么 CSS 可以实现这一点？谢谢!
最佳答案
也许我来晚了，但是用纯 CSS 做你描述的事情真的很简单。诀窍是让 #right 绝对定位并给它一个 top 和 bottom 为 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/