4

Let's say I have 2 divs within a wrapper side by side. 

<div id="wrapper">
    <div id="primary"></div>
    <div id="secondary"></div>
</div>

#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}

How can I make sure div secondary always has the same height as div primary

4

7 回答 7

4

try using javascript taking the value of the primary div an assignment at the second div.

The other way is trying the use pixel px or em, this way you ensure always has the same height both

于 2013-04-29T03:10:12.240 回答
3

There's a pretty cool trick on how to do this.

jsFiddle Demo

First, you apply padding-bottom: 100%; to each side-by-side div.

Next, you apply margin-bottom: -100%; to each side-by-side div. Note the -

Finally, you add overflow:hidden; to the div they are inside.

Presto! True happiness is yours.

HTML:

<div id="wrapper">
    <div id="primary">Lorem ipsum dolor set amet. </div>
    <div id="secondary">En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. </div>
</div>

CSS:

#wrapper  {overflow:hidden;}
#primary  {width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}
#secondary{width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}

References:

http://www.ejeliot.com/blog/61

于 2015-03-17T02:50:00.660 回答
2

If you specify the height value for their container let say #wrapper {height:300px;}, you can just set the the #primary and the #secondary height value to 100%. But if you don't want to specify any height value then you can use display:table option like in the example here http://jsfiddle.net/qiqiabaziz/LFEF5/

于 2013-04-29T04:21:01.623 回答
1 
Your CSS

.table{display:table;width:99.98%;margin:0 auto;padding:0 0.01% 0 0.01%;border-collapse:separate;border-spacing:5px;}
.row{display:table-row;}
.cell{display:table-cell;text-align:center;width:50%;}

Your HTML

<body>
    <div class="table">
        <div class="row">
            <div class="cell">content for this div
            </div>  
            <div class="cell">content for this div
            </div>
        </div>
    </div>
</body>
于 2014-02-13T04:19:35.350 回答
0

Unfortunately there is no perfect method to do this without using Javascript as realistically the two divs know nothing about one another.

What your options are depends on what exactly you were looking to achieve visually.

A quick google search brought this up which looks quite promising: http://www.vanseodesign.com/css/equal-height-columns/

If you can focus on more modern browsers you may be able to get away with using flexbox. See this post for examples etc: http://css-tricks.com/fluid-width-equal-height-columns/

于 2013-04-29T03:03:01.883 回答
0

Make the two divs of equal height (either by declaring their heights in px, em or %) and declare their overflow : auto, so if content in any or both divs increases, scroll is provided automatically and their heights do not get disturbed.

于 2013-04-29T03:59:04.523 回答
0

just make sure the parent div (div wrapper) has a width in pixel

<div id="wrapper">
    <div id="primary"></div>
    <div id="secondary"></div>
</div>

#wrapper {
    width:300px;
}
#primary {
    width:50%;
    float: left;
}
#secondary {
    width: 50%;
}

this will work, unless div primary has margin and/or padding

于 2013-04-29T04:08:37.217 回答