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:

enter image description here

But I need the result look like this below:

enter image description here

HERE IS THE PLUNKER

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <script data-require="[email protected]" 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.

HTML and bootstrap both wasn't made to satisfy the UI you desire. That UI is not extensible in any dimension (think about a person reading that on a watch). HTML naturally wants to flow content in any direction, and bootstrap was designed to flow content vertically. If you want your content to pin on the screen boundaries like a desktop application, you should write your own css, and surely you will find myriad of bugs waiting. — AVAVT
Can Row 1 be the header, Row 2 the content and Row 3 be the footer. For example getbootstrap.com/examples/sticky-footer. Else use display:flex — cforcloud
There is no css-only, cross browser friendly, way to archiev this when the template has a fluid behavior. You can use a lot of media queries based on my answer. This will work when the content of the last row will always be the same. — Steven Web
@StevenWeb, Many Many Thanks To You. But this is our company requirement, you have to avoid jquery or javaScript Code for that. — Shohel
then as i told you - work with the spacer element and use media queries . My sample is working without jquery until the height of the first and the last row changes. — Steven Web

Steven Web Steven Web · Accepted Answer · 2014-10-26T06:06:46

There is a common solution for you problem which is using a spacerelement (e.g. 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 e.g. 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:

SEE FIDDLE

Middle row height fit in twitter-bootstrap grid sytem

1 Answers