I'm trying to make following layout:
+-------------------------------------------------+
| Header + search (Twitter navbar) |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content column |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
| Footer |
+-------------------------------------------------+
Layout must take all available height & width, navigation and content columns take all available space and scroll on overflow, footer should stick to bottom.
HTML looks like this now:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/app.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="navbar">
<!-- navbar content -->
</div>
<div class="row-fluid columns">
<div class="span2 article-tree">
<!-- navigation column -->
</div>
<div class="span10 content-area">
<!-- content column -->
</div>
</div>
<div class="footer">
<!-- footer content -->
</div>
</div>
</body>
</html>
CSS:
body, html, .container-fluid { /// take all available height
height: 100%;
}
.article-tree {
color: #DCE6E5;
background: #2F323B;
}
.content-area {
overflow: auto;
height: 100%; /// explicit height to make scrolling work
}
.columns {
height: 100%; /// columns should take all height
margin-top: 42px; /// minus header
margin-bottom: 20px; // minus footer
}
.columns > div {
height: 100%; // make each column to take all available height
}
.footer {
background: red;
height: 20px;
}
In theory it should work, but columns.margin doesn't work as I expect. I thought it should make height = 100% - magin, but it just moves the container.
I've googled and seen numerous questions on StackOverflow. All of them include JavaScript or position: absolute and manual positioning. IMHO they're more hacks than a solutions, I think there should be some simpler and more elegant and cross-browser way to solve this problem.
So how do I make layout described above? Maybe Bootstrap can help me (I've looked through documentation, but there are no mentions of cases like this)?
This question is related to
html
css
twitter-bootstrap
Is this what you are looking for? Here is a fiddle demo.
The layout is based on percentage, colors are for clarity. If the content column overflows, a scrollbar should appear.
body, html, .container-fluid {
height: 100%;
}
.navbar {
width:100%;
background:yellow;
}
.article-tree {
height:100%;
width: 25%;
float:left;
background: pink;
}
.content-area {
overflow: auto;
height: 100%;
background:orange;
}
.footer {
background: red;
width:100%;
height: 20px;
}
I know it's late in the day but might help someone else!
body,html {
height: 100%;
}
.contentarea {
/*
* replace 160px with the sum of height of all other divs
* inc padding, margins etc
*/
min-height: calc(100% - 160px);
}
if you use Bootstrap 2.2.1 then maybe is this what you are looking for.
Sample file index.html
<!DOCTYPE html>_x000D_
<html xmlns="http://www.w3.org/1999/xhtml">_x000D_
<head>_x000D_
<title></title>_x000D_
<link href="Content/bootstrap.min.css" rel="stylesheet" />_x000D_
<link href="Content/Site.css" rel="stylesheet" />_x000D_
</head>_x000D_
<body>_x000D_
<menu>_x000D_
<div class="navbar navbar-default navbar-fixed-top">_x000D_
<div class="container">_x000D_
<div class="navbar-header">_x000D_
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
</button>_x000D_
<a class="navbar-brand" href="/">Application name</a>_x000D_
</div>_x000D_
<div class="navbar-collapse collapse">_x000D_
<ul class="nav navbar-nav">_x000D_
<li><a href="/">Home</a></li>_x000D_
<li><a href="/Home/About">About</a></li>_x000D_
<li><a href="/Home/Contact">Contact</a></li>_x000D_
</ul>_x000D_
<ul class="nav navbar-nav navbar-right">_x000D_
<li><a href="/Account/Register" id="registerLink">Register</a></li>_x000D_
<li><a href="/Account/Login" id="loginLink">Log in</a></li>_x000D_
</ul>_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</menu>_x000D_
_x000D_
<nav>_x000D_
<div class="col-md-2">_x000D_
<a href="#" class="btn btn-block btn-info">Some Menu</a>_x000D_
<a href="#" class="btn btn-block btn-info">Some Menu</a>_x000D_
<a href="#" class="btn btn-block btn-info">Some Menu</a>_x000D_
<a href="#" class="btn btn-block btn-info">Some Menu</a>_x000D_
</div>_x000D_
_x000D_
</nav>_x000D_
<content>_x000D_
<div class="col-md-10">_x000D_
_x000D_
<h2>About.</h2>_x000D_
<h3>Your application description page.</h3>_x000D_
<p>Use this area to provide additional information.</p>_x000D_
<p>Use this area to provide additional information.</p>_x000D_
<p>Use this area to provide additional information.</p>_x000D_
<p>Use this area to provide additional information.</p>_x000D_
<p>Use this area to provide additional information.</p>_x000D_
<p>Use this area to provide additional information.</p>_x000D_
<hr />_x000D_
</div>_x000D_
</content>_x000D_
_x000D_
<footer>_x000D_
<div class="navbar navbar-default navbar-fixed-bottom">_x000D_
<div class="container" style="font-size: .8em">_x000D_
<p class="navbar-text">_x000D_
© Some info_x000D_
</p>_x000D_
</div>_x000D_
</div>_x000D_
</footer>_x000D_
_x000D_
</body>_x000D_
</html>body {_x000D_
padding-bottom: 70px;_x000D_
padding-top: 70px;_x000D_
}Source: Stackoverflow.com