Twitter Bootstrap - Make row take up the remaining height

ngnewbie
December 7, 2016
98 views
2 votes
3 Answers

Before people mark this question as duplicate, let me tell everyone I have tried all the suggestions that were given before in SO, especially display: table. That does not work with Bootstrap.

What I want to achieve is the following-:

---------------------
|      Nav Bar      |
|-------------------|
|      |Body |      |
|      |     |      |
|______|_____|______|
|      |     |      |
|      |     |      |
|______|_____|______|

The navbar must be on top. The remaining portion of the body must have 6 divs each div taking up 4 columns.

The body portion’s height must be set to the remaining height, since the navbar will change according to resize.

I am avoiding the flexbox solution because of browser compatibly. And would prefer an only CSS solution.

This is the code I am using-:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        html,
        body {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        .first_wrapper {
            padding: 0px;
            margin: 0px;
        }

        .navbar {
            margin: 0px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container-fluid first_wrapper">
        <!-- Navbar start -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Admin Page</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </div>
        </nav>
        <!-- Navbar end -->
    </div>
    <!-- Second Container -->
    <div class="container-fluid" style="height:100%;width:100%;padding:0px;margin:0px;">
        <div class="row" style="height:100%;width:100%;padding:0px;margin:0px;">
            <div class="row" style="height:50%;width:100%;padding:0px;margin:0px;">
                <div class="col-lg-4" style="height:100%;background-color:red;"></div>
                <div class="col-lg-4" style="height:100%;background-color:green;"></div>
                <div class="col-lg-4" style="height:100%;background-color:pink;"></div>
            </div>
            <div class="row" style="height:50%;width:100%;padding:0px;margin:0px;">
                <div class="col-lg-4" style="height:100%;background-color:green;"></div>
                <div class="col-lg-4" style="height:100%;background-color:red;"></div>
                <div class="col-lg-4" style="height:100%;background-color:blue;"></div>
            </div>
        </div>
    </div>
</body>

</html>

Anything after the comment “Second Container” needs to occupy the height dynamically.

Answers

Do you want like this ?

You have to call this CDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

tis is full script

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin</title>
    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        html,
        body {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        .first_wrapper {
            padding: 0px;
            margin: 0px;
        }

        .navbar {
            margin: 0px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container-fluid first_wrapper">
        <!-- Navbar start -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Admin Page</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </div>
        </nav>
        <!-- Navbar end -->
    </div>
    <!-- Second Container -->
    <div class="container-fluid" style="height:100%;width:100%;padding:0px;margin:0px;">
        <div class="row" style="height:100%;width:100%;padding:0px;margin:0px;">
            <div class="row" style="height:50%;width:100%;padding:0px;margin:0px;">
                <div class="col-lg-4" style="height:100%;background-color:red;"></div>
                <div class="col-lg-4" style="height:100%;background-color:green;"></div>
                <div class="col-lg-4" style="height:100%;background-color:pink;"></div>
            </div>
            <div class="row" style="height:50%;width:100%;padding:0px;margin:0px;">
                <div class="col-lg-4" style="height:100%;background-color:green;"></div>
                <div class="col-lg-4" style="height:100%;background-color:red;"></div>
                <div class="col-lg-4" style="height:100%;background-color:blue;"></div>
            </div>
        </div>
    </div>

</body>

</html>

You can use CSS calc for the height of the container minus the navbar height.

<div class="container-fluid first_wrapper">
    <!-- Navbar start -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Admin Page</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
    <!-- Navbar end -->
</div>
<!-- Second Container -->
<div class="container-fluid full">

        <div class="row half">
            <div class="col-lg-4" style="background-color:red;"></div>
            <div class="col-lg-4" style="background-color:green;"></div>
            <div class="col-lg-4" style="background-color:pink;"></div>
        </div>
        <div class="row half">
            <div class="col-lg-4" style="background-color:green;"></div>
            <div class="col-lg-4" style="background-color:red;"></div>
            <div class="col-lg-4" style="background-color:blue;"></div>
        </div>

</div>

CSS:

.full {
    height: calc(100% - 52px);
}

.half {
    height: 50%;
}

.half > .col-lg-4 {
    height: 100%;
}

http://www.codeply.com/go/mkOL2syp5O

You were on the right track looking at display:table. But you needed to take it a little further with adding row and cell styling too. By creating rows using display:table-row and adding the container-fluid elements as display:table-cell you’re able to have them push the space the need without overflowing. The other trick is to handle the display:inline-block element immediately inside the body element, by setting the body font-size and line-height to 0 to combat the white space created by tabbed html, you then reset these values inside the inline-block element. Please note that because you’re using col-lg-4 you will need to make the jsfiddle window wide enough for them to become columns.

display:inline-block is notorious for leaving “gaps” between items. This is because of the “whitespace” between formatted code. There is a great article about combatting this either with comments, skipping closing tags or font size. Personally, font size is much easier to maintain.

The reason to use display:inline-block for the containing element over display:table is mostly due to a firefox bug, where display:table doesnt render correctly, you can find the solution listed here: CSS height 100% in firefox not working

JSFIDDLE

HTML

<div id="outerContainer">
    <div class="display-table">
        <div class="display-table-row" id="navigation">
            <div class="container-fluid first_wrapper display-table-cell">
                <!-- Navbar start -->
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">Admin Page</a>
                        </div>
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Page 1</a></li>
                            <li><a href="#">Page 2</a></li>
                            <li><a href="#">Page 3</a></li>
                        </ul>
                    </div>
                </nav>
                <!-- Navbar end -->
            </div>
        </div>
        <div class="display-table-row">
            <div class="container-fluid display-table-cell">
                <div class="row">
                    <div class="col-lg-4" style="background-color:red;"></div>
                    <div class="col-lg-4" style="background-color:green;"></div>
                    <div class="col-lg-4" style="background-color:pink;"></div>
                </div>
            </div>
        </div>
        <div class="display-table-row">
            <div class="container-fluid display-table-cell">
                <div class="row">
                    <div class="col-lg-4" style="background-color:green;"></div>
                    <div class="col-lg-4" style="background-color:red;"></div>
                    <div class="col-lg-4" style="background-color:blue;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html,
body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-size:0;
    line-height:0;
}

.first_wrapper {
    padding: 0px;
    margin: 0px;
}

.navbar {
    margin: 0px;
}

#outerContainer{
    display: inline-block;
    height:100%;
    width:100%;
    font-size:14px;
    line-height:1.42857143;
}
.display-table{
    display:table;
    height:100%;
    width:100%;
}
.display-table-row{
    display:table-row;
    width:100%;
    height:50%;
}
.display-table-cell{
    display:table-cell;
    width:100%;
}
.display-table-cell > .row{
    height:100%;
}
.display-table-cell > .row > [class*="col-"]{
    height:100%;
}
#navigation.display-table-row{
    height:auto;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Twitter Bootstrap – Make row take up the remaining height

Answers