将孩子的高度设置为父母的高度答案

【问题标题】：Set height of child to height of parent将孩子的高度设置为父母的高度
【发布时间】：2016-10-22 07:54:16
【问题描述】：

所以，我正在尝试创建以下网格/表格布局：

.grid-column {
  display: table-cell;
  height: 100%;
  min-height: 100%;
}
.grid-column .grid-column-content {} .wireframe {
  border-color: black;
  border-width: 1px;
  border-style: solid;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div class="wireframe" style="display: inline-block;">
  <div class="grid-column red">
    <div class="grid-column-content" style="margin: 5px;">
      <span>Some content</span>
      <br/>
      <span>More content</span>
      <br/>
      <span>Some more content</span>
      <br/>
      <span>Even more content!!!</span>
    </div>
  </div>
  <div class="grid-column green" style="min-width: 300px;">
    <div class="grid-column-content blue" style="margin: 5px;">
      Hi
    </div>
  </div>
</div>

本质上，是两个（或更多）divs 设置为显示为table-cell。 div(s) 内部可以是任何类型的内容。

例子：左边的div包含的内容较多，负责容器div的height。右边的div 的内容较少，不会填满整个height。即使将height 设置为100% 以获取正确的内容，它仍然无法填充。

它应该如下所示：

我通过使用absolute定位实现了上面的样子，但是使用absolute定位，内容被从布局系统中取出，如果它变成更大的内容，它不会调整父级的大小。

所以我不能：

使用绝对定位
设置'table' div的高度（示例中为顶级div）
在任何地方设置任何类型的固定高度！
使用 CSS3 Flexbox（必须与早期浏览器兼容）

为什么在 CSS 中这么难做到？这就像布局 101。

有人知道解决方案吗？感谢阅读。

【问题讨论】：

标签： html css html-table css-tables

【解决方案1】：

根据您的要求，您可以使用 CSS 表格 嵌套它们。

OP 评论

我不做的一个要求是设置height 顶级div（线框）。您创建了一个名为“table”的类并设置 height 到 100%。这会带来一个问题，因为如果 body 和 html 元素也设置为100% height 然后table 填充整个视口的height

您可以通过在.table 中使用max-height 来解决一些问题，这将覆盖height: 100%，但是您需要从内容较少的单元格中设置max-height。

body,
html {
  height: 100%
}
.table {
  display: table;
  table-layout: fixed;
  /* optional */
  width: 100%;
  height: 100%;
  max-height: 100px
}
.wireframe {
  border: 1px solid black;
  width: 300px;
}
.grid-column {
  display: table-cell
}
.red {
  background-color: red
}
.green {
  background-color: green
}
.green .table {
  border-spacing: 5px
}
.blue {
  background-color: blue;
}

<div class="wireframe table">
  <div class="grid-column red">
    <span>Some content</span>
    <br/>
    <span>More content</span>
    <br/>
    <span>Some more content</span>
    <br/>
    <span>Even more content!!!</span>
  </div>
  <div class="grid-column green">
    <div class="grid-column-content table">
      <div class="grid-column blue">
        HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi HiHi 
      </div>
    </div>
  </div>
</div>

OP 评论

似乎使用 Flexbox 是在保持高度动态的同时做我想做的事情的唯一方法。

所以这里有一个flexbox 解决方案：

.flex {
  display: flex;
}
.wireframe {
  border: 1px solid black;
  width: 300px;
}
.grid-column {
  flex: 1
}
.red {
  background-color: red
}
.green {
  background-color: green;
  display:flex;
  padding: 5px
}
.blue {
  background-color: blue;
}

<div class="wireframe flex">
  <div class="grid-column red">
    <span>Some content</span>
    <br/>
    <span>More content</span>
    <br/>
    <span>Some more content</span>
    <br/>
    <span>Even more content!!!</span>
  </div>
  <div class="grid-column green">
      <div class="grid-column blue">
        Hi
      </div>
  </div>
</div>

【讨论】：

你找到我了。不知何故，我在代码 sn-p 中无法做到这一点 10 分钟。很奇怪。
哈！来自我的 +1，但其他几个人刚刚完全投票反对我，因为stackoverflow.com/a/37932179/5641669 给出了类似的答案
我不做的要求之一是设置顶层 div（线框）的高度。您创建了一个名为“table”的类并将高度设置为 100%。这带来了一个问题，因为如果 body 和 html 元素也设置为 100% 高度，那么表格会填充整个视口的高度。 jsfiddle.net/tmk8zkeb
@Johannes 我看到了你的回答，我也觉得很奇怪..去图，也许下次用表格回答并建议不要在笔记中使用它，通常我会这样做
@BradleyOdell 为什么你应该拥有body,html {height:100%} ？除非你想要一些东西来填充视口的高度，否则你会有东西来填充视口的高度吗？如果不是该规则没有意义，我的代码将适用

【解决方案2】：

我发现你的 HTML 很混乱：

1) 尝试将它所属的样式写在……css文件中，而不是在HTML标签中！

2) html 结构全乱了...尝试将垂直元素分组在定义水平空间的“包装”框中。

您可以在这里尝试我的解决方案： https://plnkr.co/edit/c8OH4sonV9MnhhRLdDOT?p=preview

HTML：

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="wrapper">

    <div class="left-column red">
      <div class="content">
        <span>Some content</span>
        <br/>
        <span>More content</span>
        <br/>
        <span>Some more content</span>
        <br/>
        <span>Even more content!!!</span>
      </div>
    </div>

    <div class="right-column green">
      <div class="content">
        Hi
      </div>
    </div>

  </div>

</body>

</html>

CSS：

.wrapper {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.left-column {
    width: 150px;
    padding: 5px;
}

.right-column {
  padding: 5px;
  width: 100%;
}

.right-column .content {
  background-color: blue;
  height: 100%;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

我使用 flex-box css 特性来定义围绕两列的包装器，这样更易于阅读和维护。希望对您有所帮助，但请继续学习！ :)

【讨论】：

【解决方案3】：

CSS 2.1 规范要求的唯一工作方式是使内部元素脱离流：

.grid-column {
  height: 100%;
  position: relative;
}
.grid-column:nth-child(2) > .grid-column-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.grid-column {
  display: table-cell;
  height: 100%;
  min-height: 100%;
  position: relative;
}
.grid-column:nth-child(2) > .grid-column-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.wireframe {
  border-color: black;
  border-width: 1px;
  border-style: solid;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div class="wireframe" style="display: inline-block;" >
  <div class="grid-column red">
    <div class="grid-column-content" style="margin: 5px;">
      <div>Some content</div>
      <div>More content</div>
      <div>Some more content</div>
      <div>Even more content!!!</div>
    </div>
  </div>
  <div class="grid-column green" style="min-width: 300px;">
    <div class="grid-column-content blue" style="margin: 5px;">
      Hi
    </div>
  </div>
</div>

否则，行为取决于实现。单元格必须至少和内容一样高，所以如果你可以让内容和单元格一样高，那就是一个循环定义。

如果使用绝对定位，则内容不再对单元格的高度产生影响，因此圆被打断，行为明确。

或者，我会推荐 flexbox，这是一种旨在处理此类情况的新布局。

【讨论】：

是的，它可能是一个循环定义。但是将内容设置为单元格的高度并不违反原始要求，因为单元格仍然至少与内容一样高。
@BradleyOdell 问题是有无数个可能的高度可以满足百分比，浏览器应该选择哪一个？如果您可以毫无问题地使用height: 100%，为什么不使用height: 200%？但这必须以某种方式打破。规范没有定义这些情况，所以实现可以做他们想做的事。不要想当然地认为它每次都能在任何地方工作，即使它在你的浏览器上表现得像你想要的那样。