How do I make two bootstrap 3 columns have the same height?
Question
I am creating a bootstrap 3 page with a 25% left column and a 75% right column. In the right column I have a resizable div. I would like the left column to always be the same height as the right one (even after the div on the right is resized). Here is some sample code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
#left {
border-style: solid;
border-width: 1px;
border-color: red;
}
#resizableRight {
overflow-y: scroll;
resize: vertical;
min-height: 200px;
border-style: solid;
border-width: 1px;
border-color: green;
}
#staticRight {
border-style: solid;
border-width: 1px;
border-color: blue;
}
</style>
</head>
<body>
<!-- bootstrap container -->
<div class="container-fluid">
<div class="row">
<!-- 25% of screen -->
<div id="left" class="col-md-3">
Left
</div>
<!-- 75% of screen -->
<div class="col-md-9">
<div id="resizableRight">Resizable Right</div>
<div id="staticRight">Static Right</div>
</div>
</div>
</div>
</body>
I would like the red border on the left to always line up on the bottom with the blue border on the right.
Is there some css or js event handling that I can add to make this happen? I'd prefer a pure css/js solution.
Edit: The left div will hold some content that may extend beyond the height of the right side. My goal is to make it scrollable but have the visible height controlled by the resizable right element.
2 answers
solution1
0 2018-07-23 00:20:31
One way of doing it is using tables, here's a bit of code that should provide you with what you want.
<div id="a-row" class="row">
<div class="col-md-3 panel" style="background-color: red">
some content
</div>
<div class="col-md-9 panel" style="background-color: green">
some more content
</div>
</div>
#a-row {
display: table;
width: 100%;
}
#a-row .panel {
float: none;
display: table-cell;
vertical-align: top;
}
Putting that all together into the code you've provided should look something like this.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
#left {
border-style: solid;
border-width: 1px;
border-color: red;
}
#resizableRight {
overflow-y: scroll;
resize: vertical;
min-height: 200px;
border-style: solid;
border-width: 1px;
border-color: green;
}
#staticRight {
border-style: solid;
border-width: 1px;
border-color: blue;
}
#a-row {
display: table;
width: 100%;
}
#a-row .panel {
float: none;
display: table-cell;
vertical-align: top;
}
</style>
</head>
<body>
<!-- bootstrap container -->
<div class="container-fluid">
<div id="a-row" class="row">
<!-- 25% of screen -->
<div id="left" class="col-md-3 panel">
Left
</div>
<!-- 75% of screen -->
<div class="col-md-9 panel">
<div id="resizableRight">Resizable Right</div>
<div id="staticRight">Static Right</div>
</div>
</div>
</div>
</body>
</html>
solution2
-1 2018-07-23 07:18:43
<body>
<!-- bootstrap container -->
<div class="container-fluid">
<div class="row row-eq-height">
<!-- 25% of screen -->
<div id="left" class="col-md-3">
Left
</div>
<!-- 75% of screen -->
<div class="col-md-9">
<div id="resizableRight">Resizable Right</div>
<div id="staticRight">Static Right</div>
</div>
</div>
</div>
Also add this inside the head tag:
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />
No css styling has to be included explicitly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.