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
Sure, just change the display of the child divs from inline-block
to table-cell
:
#a, #b {
display:table-cell;
}
#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>
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.
If you can use flex
its very easy, Please have a look at the demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.