How to make sure two divs have the same height?

2020-06-23 06:22发布

站内问答 / HTML/CSS
1965 7 6

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

标签： html css
举报
7条回答
姐就是有狂的资本
2楼-- · 2020-06-23 06:59

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/

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
3楼-- · 2020-06-23 07:00 
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>
查看更多
0人赞 添加讨论(0) 举报
再贱就再见
4楼-- · 2020-06-23 07:10

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

查看更多
0人赞 添加讨论(0) 举报
叛逆
5楼-- · 2020-06-23 07:12

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.

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
6楼-- · 2020-06-23 07:13

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

查看更多
0人赞 添加讨论(0) 举报
一夜七次
7楼-- · 2020-06-23 07:17

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/

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)