Geek Answers Handbook

Creating row divs will be the same height using CSS

I have a line of divs, each of which should be the same height, but I can’t understand that this height can be in front (the content comes from an external source). At first I tried to put divs in a closed div and left them to the left. Then I set their height as "100%", but this did not have a noticeable effect. By setting the height on the enclosing div to a fixed height, I could then expand the floating divs, but only to a fixed height of the container. When the content in one of the divs exceeded a fixed height, it spilled; floating divs refused to expand.

I was looking for this problem with float-divs-of-the-the-same-height and apparently there is no way to do this with CSS. So now I'm trying to use a combination of relative and absolute positioning instead of floats. This is CSS:

<style type="text/css">
div.container {
  background: #ccc;
  position: relative;
  min-height: 10em;
}
div.a {
  background-color: #aaa;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 40%;
}
div.b {
  background-color: #bbb;
  position: absolute;
  top: 0px;
  left: 41%;
  bottom: 0px;
  width: 40%;
}
</style>

This is a simplified version of HTML:

   <div class="container">
    <div class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div>
    <div class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div>
   </div>

This works if you don't change the minimum height to something like 5em (which indicates what happens when the content exceeds the minimum height), and you can see that although the text is not cropped, the div still refuses to expand. Now I'm lost. Is there a way to do this using CSS?

+5
source share
6 answers

, . , , , , .

, , , , CSS + . , .

, ! , CSS ( ), , javascript .

, , .

+10

, , faux columns.

, , , .

+2

JavaScript, , , JavaScript. , CSS. , seanb , , , . .

, display: table-cell / .

+1

, , . , Javascript ( ), AJAX, Framework Prototype.js. , , JS:

$$('div.container').each(function (element) {
 var longest = 0;

 element.descendants().each(function (child) {
  if (child.getHeight() > longest)
   longest = child.getHeight();
 });

 element.descendants().each(function (child) {
  child.style.height = longest + 'px';
 });
});

.

+1

, . , , ( ). , : (

0

css-, , , , . :

<div id="wrapper">
  <div class="content" id='one>
  <div class="content" id="two>
  <div class="content" id="three>
  <div class="background" id="back-one">
  <div class="background" id="back-two">
  <div class="background" id="back-three">
</div>

. , ( z-, )

, , 100%. , .

0

More articles:


All Articles