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

【问题标题】：Dynamic height increase of one div with respect another div一个 div 相对于另一个 div 的动态高度增加
【发布时间】：2012-04-23 23:43:37
【问题描述】：

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

【问题讨论】：

标签： css html

【解决方案1】：

假设元素在body 之后。给body 100%，还有所有的div

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

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

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

【讨论】：

【解决方案2】：

将这些 div 包含在父 div 中，并将它们的高度设置为 100%。

【讨论】：

【解决方案3】：

您只需要一个三列 (X)HTML + CSS 布局。

我是here

【讨论】：

【解决方案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>

【讨论】：