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

Question

html structure:

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

Is there a way to set the height of "a" to the height of "b" by using the fact, that "container" equals the height of the longest div? As you see I'm trying to achieve this by setting container's height to auto (=height equals the longest div) and then set the height of the divs "a"&"b" to 100%. But that won't work.

I'd like to avoid to use js.

Codepen here: http://codepen.io/danielpixelz/pen/VLLpjO

Answer 1

Sure, just change the display of the child divs from inline-block to 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> 

Answer 2

I have a feeling that you want to replicate the style of a table but without the syntax of a table.

Assign the two "a" and "b" div's css to display:table-cell;

  display:table-cell;

You may want to research its browser acceptance as it may not work for all browsers.

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

Answer 3

If you can use flex its very easy, Please have a look at the demo

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