Question

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

git checkout symfony
git merge -s ours master
git checkout -B master
git branch -D symfony

.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（s）内部可以是任何类型的内容。

示例：左侧div包含更多内容，并负责容器div的{{1}}。右height内容较少，不会填充整个div 。即使div对于正确的内容设置为height，它仍然无法填充。

应该看起来像这样：

我通过使用height定位实现了上述目标，但使用100%定位，内容将从布局系统中取出，如果内容变为更大的内容，则不会调整父级的大小。

所以我不能：

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

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

有谁知道解决方案？谢谢你的阅读。

Answer 1

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

OP评论

我对不做的要求之一就是设置height 顶级div（线框）。您创建了一个名为＆＃39; table＆＃39;并设定 height到100%。这会产生问题，因为如果body和html 元素也设置为100% height，然后table填充整个元素 viewport的height

您可以使用max-height中的.table覆盖height: 100%来执行一些变通方法，但是您需要设置内容较少的单元格中的max-height。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

OP评论

似乎使用Flexbox是保持高度动态的唯一方法。

所以这是一个flexbox解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

否则，该行为与实现有关。单元格必须至少与内容一样高，因此如果您可以使内容与单元格一样高，则它将是循环定义。

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

或者，我建议使用flexbox，这是一种新的布局，旨在处理这种情况。

Answer 3

我发现你的HTML很混乱：

1）尝试将它所属的样式写入css文件，而不是HTML标签！

2）html结构全部搞砸了...尝试将垂直元素分组在＆＃34;包装器中＃34;定义水平空间的框。

您可以在此处尝试我的解决方案： 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 个答案: