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

Question

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”的高度？ 如你所见，我试图通过将容器的高度设置为auto（= height等于最长div）来实现此目的，然后将div“a”和“b”的高度设置为100％。 但那不行。

我想避免使用js。

Codepen在这里： http ：//codepen.io/danielpixelz/pen/VLLpjO

Answer 1

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

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

jsFiddle例子

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

Answer 2

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

分配两个“a”和“b”div的css来显示：table-cell;

  display:table-cell;

您可能希望研究其浏览器接受度，因为它可能不适用于所有浏览器。

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

Answer 3

如果您可以非常轻松地使用flex ，请查看演示

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