使div高度等于其父级（100%）

Question

我有一个主 div，其中包含另外两个 div。我需要第一个必须与父 div 具有相同的高度。 CSS 中未指定父级 div 高度。

这是一个例子：http://jsfiddle.net/x8dhnh4L/ 粉色 div 必须扩展到父级的整个高度（红色边框）。

我尝试过的一个解决方案是使用

display:flex

，但它对 IE 不友好（我需要 IE8+ 兼容性）。另外，我想仅使用 CSS 来实现这一点，所以我避免使用 JS。

Answer 1

您可以尝试使用表格布局：

• 设置显示：父级上的表格

• 将 display:table-cell 设置为需要相同高度的子项

  #container {
      position: relative;
      width:600px;
      border: 1px solid red;
      display:table;
  }
  
  #content {
      display: table-cell;
      background-color:pink;
      width:400px;
  }
  
  #side-bar {
      display:table-cell;
      background-color:yellow;
      width:170px;
      padding-left:25px;
      vertical-align: top;
  }
  

这是一个工作小提琴： http://jsfiddle.net/x8dhnh4L/2/

如评论中所述，边距在带有

display:table-cell

的元素中不起作用。如果可以的话，您可以使用

padding-left

代替

margin-left

... 您还可以添加额外的

<div>

将 2 列分开 25 像素。

Answer 2

http://jsfiddle.net/x8dhnh4L/1/

将侧边栏设置为

float:right;

并设置内容

height:100%;

Answer 3

快速解决方案是使用

display:table

代替

#container

，使用

height:100%

代替

#content

。

http://jsfiddle.net/afelixj/x8dhnh4L/5/

Answer 4

如果您确实希望“#content”div扩展到“#container”高度，则需要为父div“#container”设置高度，并为“#content”设置高度和浮动

#container {
    position: relative;
    width:600px;
    border: 1px solid red;
    height: 800px; //whatever height you need
}

#content {
    display: inline-block;
    background-color:pink;
    width:400px;
    height:100%;
    float: left;
}

这样“#content”高度将调整为“#container”高度，但“#side-bar”将采用显示其内容所需的高度。

使用 Hanoncs 解决方案，父 div“#container”将调整为子 div“#content”高度。

Answer 5

解决此问题的一个简单方法是在父元素上使用

display: table;

声明，并在子元素上使用

display: table-cell;

声明。

我建议阅读使用跨浏览器 CSS 的等高列并且没有黑客。

希望这有帮助！

Answer 6

放：

display: grid;

在父级上 - 如果它只有一个子级，则子级将调整为与父级相同的大小