将 child 的高度设置为 parent 的高度

Question

所以，我正在尝试创建以下 grid/table 布局：

.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>

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

例子：左边div内容量较大，负责容器div的height。右边div的内容较少，没有填满整个height。即使将height设置为100%为正确的内容，它仍然没有填充。

它应该看起来像这样：

我通过使用 absolute 定位实现了上面的外观，但是使用 absolute 定位，内容从布局系统中取出并且它不会调整 parent if它变成了更大的内容。

所以我不能:

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

为什么在 CSS 中很难做到这一点？这就像布局 101.

有人知道解决办法吗？感谢阅读。

Answer 1

根据您的要求，您可以使用 CSS 表格 嵌套它们来完成此操作。

OP 评论

One of my requirements of what NOT to do was to set the height of the top level div (wireframe). You created a class called 'table' and set the height to 100%. This poses a problem because if the body and html element are also set to 100% height then the table fills the entire viewport's 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评论

It seems that using Flexbox is the only way to do what I want while keeping the height dynamic.

所以这是一个 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>

Answer 2

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，这是一种专为处理此类情况而设计的新布局。

Answer 3

我发现你的 HTML 很困惑：

1) 尽量把样式写在属于...的css文件中，而不是在HTML标签中！

2) html 结构一团糟...尝试将垂直元素分组在定义水平 space.

的 "wrapper" 框中

您可以在这里尝试我的解决方案： 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 功能来定义两列周围的包装器，这样更容易阅读和维护。希望对你有帮助，但要继续学习！ :)

将 child 的高度设置为 parent 的高度

Set height of child to height of parent

html

css

html-table

css-tables