如何确保两个divs的高度相同?

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

假设有两个div在一个包装中并排放置。

<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

如何确保div secondary始终与div primary相同的高度

7 个解决方案

#1

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

不幸的是，没有一个完美的方法可以做到这一点，而没有使用Javascript，实际上这两个divs对彼此一无所知。

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/

快速搜索谷歌，就会发现这个选项看起来很有希望:http://www.vanseodesign.com/css/equal- heiight -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/

如果你能专注于更现代的浏览器，你就可以使用flexbox。请参阅这篇文章中的示例:http://css-魔术师s.com/fluid-width-equal- heiight -columns/

#2

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

尝试使用javascript将主div的值作为第二个div的赋值。

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

另一种方法是尝试使用像素px或em，这样可以确保两者的高度相同

#3

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

这是一个很酷的技巧。

jsFiddle Demo

jsFiddle演示

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

首先，你应用桨底:100%;每个div并排。

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

接下来，您应用margin-bottom: -100%;对于每个并排的div。注意-

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

最后,您添加溢出:隐藏;到分区，他们在里面。

Presto! True happiness is yours.

您看!真正的幸福是你的。

HTML:

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:

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

#4

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/

如果您为它们的容器指定高度值，比如#wrapper {height:300px;}，那么您可以将#primary和#secondary height值设置为100%。但是，如果您不想指定任何高度值，那么您可以使用display:table选项，比如这里的http://jsfiddle.net/qiqiabaziz/LFEF5/。

#5

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>

#6

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.

使两个div具有相同的高度(通过在px、em或%中声明它们的高度)，并声明它们的溢出:auto，因此如果任何一个或两个div中的内容增加，滚动将自动提供，它们的高度不会受到干扰。

#7

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

只需确保父div (div包装器)具有像素的宽度

<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

这是可行的，除非div primary有页边距和/或页边距

#1