Question

我有两个div。这两个div被定位为彼此相邻的两个垂直列。我没有通过css预先确定div的高度，而是希望它随着我放入的内容动态增长。对于一个div来说这很简单，但我的问题是我希望左边的div与背景颜色为绿色，以增长到右边div的相同高度。右边的内容总是比左边的内容多。

Answer 1

将这些div包含在父div中，并将其高度设置为100％。

Answer 2

假设元素在body之后。 100％给身体和所有div

body, #div1, #div2 { height: 100%; }

如果不是，那么您必须再次修复父级或链100%高度一直到身体的高度。

#parent { height: 800px; }
#div1,#div2 { height: 100%; }

Answer 3

您只需要一个三列（X）HTML + CSS布局。

这是here

Answer 4

让我们插入父div（这两个相邻div的容器）
添加属性“ display：flex;”到父级div

.parent{
  display: flex;
}

.child1, .child2{
  padding: 10px;
  border: 1px solid gray;
}

<body>
    <div class="parent">
        <div class="child1">
            CHILD 1 AREA<br />
            CHILD 1 AREA
        </div>
         <div class="child2">
             CHILD 2 AREA
        </div>
    </div>
</body>

相对于另一个div，一个div的动态高度增加

4 个答案: