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.
3
Answers
Do you want like this ?
You have to call this CDN
tis is full script
You can use CSS
calc
for the height of the container minus the navbar height.CSS:
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 usingdisplay:table-row
and adding thecontainer-fluid
elements asdisplay:table-cell
you’re able to have them push the space the need without overflowing. The other trick is to handle thedisplay:inline-block
element immediately inside the body element, by setting the bodyfont-size
andline-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 usingcol-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 overdisplay:table
is mostly due to a firefox bug, wheredisplay:table
doesnt render correctly, you can find the solution listed here: CSS height 100% in firefox not workingJSFIDDLE
HTML
CSS