I am currently working on a design layout using bootstrap 3.2.0. I have managed to create a Fixed header and footer, and I am now facing the challenge of having a full-height container with independent scrollbars. Are there any effective methods in Twitter Bootstrap to achieve this?
Below is an illustration of the layout I am aiming to construct:
Here's a snippet of the code I have so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<script data-require="jquery@*" 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>
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit condimentum nisl interdum sed iaculis mi consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate consectetur urna, a dignissim odio vestibulum a.</p>
<p>Aliquam pharetra, nunc a tempor sodales, orci sem pretium orci, quis pretium tellus purus ac nunc. Morbi dignissim urna eget sapien laoreet volutpat. Sed lacus lorem, vulputate eu aliquet non, egestas vel augue. Fusce gravida arcu at elit pharetra luctus. Curabitur pretium mi vitae purus posuere lobortis. Fusce pulvinar, mi at eleifend venenatis, magna risus rhoncus ipsum, dapibus ornare nisi risus ac lorem. Etiam feugiat felis eu nulla pretium pellentesque. Curabitur id lorem ut orci blandit commodo. Vestibulum tempor ultricies nibh, eu malesuada nibh commodo non. Morbi malesuada porta fringilla. Mauris suscipit vestibulum ante ut laoreet. Duis eget mollis tortor. In imperdiet tempus mauris eu hendrerit. Vivamus ultrices rutrum magna sit amet dapibus. Phasellus sem justo, pulvinar vitae adipiscing ut, dictum in tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit condimentum nisl interdum sed iaculis mi consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate consectetur urna, a dignissim odio vestibulum a.</p>
<p>Aliquam pharetra, nunc a tempor sodales, orci sem pretium orci, quis pretium tellus purus ac nunc. Morbi dignissim urna eget sapien laoreet volutpat. Sed lacus lorem, vulputate eu aliquet non, egestas vel augue. Fusce gravida arcu at elit pharetra luctus. Curabitur pretium mi vitae purus posuere lobortis. Fusce pulvinar, mi at eleifend venenatis, magna risus rhoncus ipsum, dapibus ornare nisi risus ac...
CSS
footer {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
height: 26px;
background: #5f5f5f;
bottom: 0;
clear: both;
}
.container-fluid {
height: 100%;
overflow-y: auto;
}
.col-md-12 {
background-color: gray;
height: 100%;
}
Check out the plunker for a live demo!