[英]make two side-by-side divs of equal heights
This is my final layout 这是我的最终布局
I want to keep the left column height same as the right one. 我想保持左列的高度与右列的高度相同。 I am simplifying my html so would be easy for you.
我正在简化我的html,因此对您来说很容易。
<div id="graphsWindow" style="height:100%; ">
<div class="table" style="height: 100%">
<div class="row" style="margin-left:0px;margin-top:0px; padding-top:0px; padding-bottom:0px; height:100%;">
<div style="border:groove; margin-left:10px; margin-bottom:0px; padding-bottom:0px; margin-right:2px; border:groove; height:100%" class="col-md-2">
</div>
<div class="col-md-9" style="padding-bottom:0px; padding-top:0px; margin-top:0px; margin-left:15px; height:100%">
</div>
</div>
</div>
The div with class col-md-2 contains the picture, the prev/next buttons and the list with check boxes 具有col-md-2类的div包含图片,上一个/下一个按钮和带有复选框的列表
The div with class col-md-9 contains the graphs and the buttons, labels at the bottom. 类别为col-md-9的div在底部包含图形和按钮,标签。
I have not specified a fixed height any where inside. 我在内部的任何地方都没有指定固定高度。 How can I make the two divs of equal height?
如何使两个div高度相等?
Default Popup Window 默认弹出窗口
Maximized Window 最大化窗口
With bootstrap-4, For equal height columns use row-eq-height
对于bootstrap-4,对于等高列,请使用
row-eq-height
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="row row-eq-height"> <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height > .col-xs-4</div> <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height > .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div> <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height > .col-xs-4</div> </div>
Ref: http://getbootstrap.com.vn/examples/equal-height-columns/ 参考: http : //getbootstrap.com.vn/examples/equal-height-columns/
add this css if you are using bootstrap 3 如果您正在使用Bootstrap 3,请添加此CSS
@media (min-width: 768px) {
.row.row-eq-height{
display: flex;
flex-wrap: wrap;
}
}
I use of jquery, i hope help you: 我使用jquery,希望对您有所帮助:
$(document).ready(function(){
var col9Height = $('.col-md-9').height();
$('.col-md-2').height(col9Height);
})
There are a million ways to get this. 有百万种方法可以做到这一点。
height:100%
normally doesn't do much. height:100%
通常不会做很多事情。
since you don't have any other divs(like nav or footer) 因为您没有其他div(例如,导航或页脚)
You could use: 您可以使用:
min-height: 50vh;
for each 每个
You made need to play with it a bit, but I would remove the height: 100% everywhere, and add a min-height: 50vh;
您需要稍微玩一下,但是我将在所有位置都删除高度:100%,并添加
min-height: 50vh;
to each row div. 到每行div。
Hopefully this gets you started in the right direction. 希望这可以帮助您朝正确的方向开始。
If you need another strategy, let me know. 如果您需要其他策略,请告诉我。
My final markup is 我最后的标记是
<div id="graphsWindow" >
<div class="table" style="height:90%">
<div class="row " style="margin-left:0px;margin-top:0px; padding-top:0px; padding-bottom:0px; height:100%; ">
<div style="border:groove; margin-left:10px; margin-bottom:0px; padding-bottom:0px; margin-right:2px; height:100%" class="col-md-2">
</div>
<div class="col-md-9" style="padding-bottom:0px; padding-top:0px; margin-top:0px; margin-left:15px; height:100%">
</div>
</div>
</div>
which is exactly what i needed but when the window is not maximized the two divs are again of different height. 这正是我所需要的,但是当窗口未最大化时 ,两个div再次处于不同的高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.