Middle row height fit in twitter-bootstrap grid sytem
Question
I am shohel rana. I have been facing a problem since many days. I did not find any solution of my problem.
The problem is:
I have three rows. The row one height will be fit according to their content height and the row three height will be fit according to their content height. But the row two will be fit according to rest of height.
Here is my problem that is showing in picture below:
But I need the result look like this below:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row row-1">
<div class="col-md-4">ROW1 COLUMN1</div>
<div class="col-md-4">ROW1 COLUMN2</div>
<div class="col-md-4">Lorem ipsum dolor sit amet
Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem ROW2 COLUMN1 ROW3 COLUMN1 ROW3 COLUMN2 Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem
</html>
CSS:
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.container-fluid {
background-color: gray;
height: 100%;
}
.row-1 {
background-color: #b200ff;
margin-bottom: 5px;
}
.row-1 > .col-md-4 {
background-color: #0094ff;
border: 1px dashed #111010;
text-align: center;
}
.row-2 {
background-color: #b6ff00;
margin-bottom: 5px;
}
.row-2 > .col-md-12 {
background-color: #ff6a00;
border: 1px dashed #111010;
text-align: center;
}
.row-3 {
background-color: #00ff21;
}
.row-3 > .col-md-4 {
background-color: #00ffff;
border: 1px dashed #111010;
text-align: center;
}
Precaution:
- Avoid display: table, table-row, and table-cell.
- Avoid JavaScript code.
1 answers
solution1
0 2014-10-26 06:06:46
There is a common solution for you problem which is using a spacer element (eg a div). To integrate this element you have to change your markup a little bit.
Markup:
<div class="container-fluid first-container">
<div class="row row-1">
<div class="col-md-4">ROW1 COLUMN1</div>
<div class="col-md-4">ROW1 COLUMN2</div>
<div class="col-md-4">ROW1 COLUMN3</div>
</div>
</div>
<div class="container-fluid full-height-container">
<div class="row row-2">
<div class="col-md-12">
ROW2 COLUMN1
</div>
<div class="spacer"></div>
</div>
</div>
<div class="container-fluid last-container">
<div class="row row-3">
<div class="col-md-4">ROW3 COLUMN1</div>
<div class="col-md-4">ROW3 COLUMN2</div>
<div class="col-md-4">ROW3 COLUMN3</div>
</div>
</div>
As you can see, i wrapped all important rows in separate containers and in the full-height-container i inserted the spacerelement. This div must have the same height as the last-row to prevent the content will be placed behind the last row.
CSS:
html,
body {
height: 100%;
min-height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
background-color: gray;
}
.row-1 {
background-color: #b200ff;
}
.first-container {
position: absolute;
width: 100%;
z-index: 1;
}
.full-height-container {
height: 100%;
padding-top: 25px; /*height of the first row*/
}
.spacer {
height: 22px;
position: absolute;
bottom: 0;
}
.last-container {
margin-top: -22px;
}
.row-1 > .col-md-4 {
background-color: #0094ff;
border: 1px dashed #111010;
text-align: center;
}
.row-2 {
background-color: #b6ff00;
height: 100%;
}
.row-2 > .col-md-12 {
background-color: #ff6a00;
border: 1px dashed #111010;
height: 100%;
text-align: center;
}
.row-3 {
background-color: #00ff21;
}
.row-3 > .col-md-4 {
background-color: #00ffff;
border: 1px dashed #111010;
text-align: center;
}
Here you can see that i added additional css classes. A) for better readability and b) you should avoid to override native bootstrap css-classes cause this can bring you in a lot of troubles when the project grows.
It is important to pass the height (100%) through the DOM elements until the row-2 otherwise the height will not be set.
Also note, that now the first row is positioned absolute. This means that it will overflow the second row. To avoid this you must set a padding-top to the full-height-content area.
This is a nice css solution but you will face another major problem!! What about the fluid behavior?? You may not know the height of the last row as well as the height of the first row because you are using a fluid template.
So this is the point where you must use jQuery for eg and calculate the height of the last-row as well as the height of the spacer element. From my point of view, there is no other way to handle this.
So i made a little sample for you just to give you an idea:
jQuery:
$(document).ready(function () {
setSizes();
});
$(window).resize(function () {
setSizes();
})
function setSizes() {
var lastRowHeight = $("div.last-container").height();
$("div.spacer").height(lastRowHeight);
$("div.last-container").css({ marginTop: -(lastRowHeight) });
$("div.full-height-container").css({ paddingTop: lastRowHeight });
}
You can alter this to make it more efficient!
Now lets bring it all together:
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.