如何在没有js的情况下设置div1 = container = div2的高度答案

【问题标题】：How to set height of div1 = container = div2 without js如何在没有js的情况下设置div1 = container = div2的高度
【发布时间】：2015-07-10 07:51:02
【问题描述】：

html结构：

<div id="container">
  <div id="a">
  </div>

    <div id="b">
    </div>
</div>

css:

#container {
  background-color:blue;
  text-align:center;
  margin:0 auto;
  width:60%;
  padding:20px;
  position:relative;
}

#a {
  background-color:green;
  width:40%;
  display:inline-block;
  vertical-align:top;
  height:100%;
}

#b {
  background-color:red;
  width:40%;
  display:inline-block;
  vertical-align:top;
  height:100%;
}

有没有办法通过使用“容器”等于最长 div 的高度这一事实将“a”的高度设置为“b”的高度？如您所见，我试图通过将容器的高度设置为自动（=高度等于最长的 div）然后将 div 的高度“a”&“b”设置为 100% 来实现这一点。但这行不通。

我想避免使用js。

在这里编写代码：http://codepen.io/danielpixelz/pen/VLLpjO

【问题讨论】：

flexbox 或 css 预处理器会为您执行此操作。
如果我理解正确，添加父元素display: table;和子元素display: table-cell;

标签： html css

【解决方案1】：

当然，只需将子 div 的显示从 inline-block 更改为 table-cell：

#a, #b {
    display:table-cell;
}

jsFiddle example

#container {
    background-color:blue;
    text-align:center;
    margin:0 auto;
    width:60%;
    padding:20px;
    position:relative;
}
#a {
    background-color:green;
    width:40%;
}
#b {
    background-color:red;
    width:40%;
}
#a, #b {
    display:table-cell;
}

<div id="container">
    <div id="a">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div id="b">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</div>
</div>

【讨论】：

【解决方案2】：

我有一种感觉，您想复制表格的样式但没有表格的语法。

将“a”和“b”两个div的css赋值给display:table-cell;

  display:table-cell;

您可能需要研究它的浏览器接受度，因为它可能不适用于所有浏览器。

http://codepen.io/anon/pen/WvvpOp

【讨论】：

【解决方案3】：

如果你可以使用flex 非常简单，请看演示

http://jsfiddle.net/Flocke/vxUb2/

【讨论】：