<!DOCTYPE html>
<html>
<head>
<title>Joshids-Bootstrap Application Layout</title>
<link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="height-100">
<div class="container-fluid height-100">
<header id="header" class="navbar navbar-inverse">
<nav class="col-md-12">
<div class="navbar navbar-header col-md-9">
<button type="button" class="navbar-toggle col-md-6" data-toggle="collapse">
<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 col-md-6" href="#">
<div class="col-md-12">
<img src="http://plnkr.co/img/plunker.png" height="30" width="30" class="navbar-left" />
<span class="font-size-16px font-weight-bold col-md-6 color-white">Plunker</span>
<span class="font-size-8px font-weight-bold col-md-6 color-white">Second line for Plunker</span>
</div>
</a>
</div>
<div class="collapse navbar-collapse col-md-3 navbar-right">
<ul class="nav navbar-nav col-md-12">
<li>
<a href="#" class="glyphicon glyphicon-cog color-white"></a>
</li>
<li>
<a href="#" class="glyphicon glyphicon-question-sign color-white"></a>
</li>
<li>
<a href="#" class="glyphicon glyphicon-user color-white"></a>
</li>
<li><a class="font-size-20px color-white">Darshan JOSHI</a>
</li>
</ul>
</div>
</nav>
</header>
<article class="col-md-12 height-100">
<div class="container-fluid col-md-12 height-100">
<div class="sidebar col-md-2 height-100">
<h3>left navigation</h3>
<div class="panel panel-info">
<div class="panel-heading">
<a class="panel-title glyphicon glyphicon-expand" href="_blank">
Title 1
</a>
</div>
<div class="panel-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<a class="panel-title glyphicon glyphicon-expand" href="_blank">
Title 2
</a>
</div>
<div class="panel-content">Praesent eget magna et ante suscipit lacinia. Aenean porttitor velit id pretium blandit. Aenean ut sodales ante. Ut faucibus ornare venenatis. Duis sit amet arcu eros. Mauris volutpat vestibulum congue. Nam volutpat, urna eu varius dapibus,
velit nisl bibendum lorem, sit amet dapibus sem dolor eu felis. Nulla tincidunt augue vel dolor convallis lobortis. Nunc nibh dolor, tincidunt elementum lorem id, porta imperdiet neque. Quisque egestas lacus nec magna mattis aliquam. Nunc
eget orci odio. Quisque neque odio, lobortis a orci ut, tempus feugiat tortor. Quisque et tincidunt arcu. Sed vel accumsan risus. Quisque enim ipsum, luctus vitae ultrices at, vulputate eu lorem. Curabitur at nibh sagittis, lobortis odio
nec, sodales velit.</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<a class="panel-title glyphicon glyphicon-expand" href="_blank">
Title 3
</a>
</div>
<div class="panel-content">Aenean interdum, magna nec molestie congue, magna nisi sodales dolor, at mattis ipsum nisi at nibh. Aenean quis dictum lacus. Vivamus commodo sit amet nibh eget scelerisque. Duis consequat fringilla mollis. Sed eros risus, sodales in porttitor
bibendum, vulputate ut est. Mauris in ullamcorper sapien. Morbi imperdiet consequat luctus. Donec vestibulum dapibus libero elementum posuere. Quisque posuere ipsum turpis, nec porttitor eros lobortis vel. Proin porttitor consequat adipiscing.
Proin posuere orci odio, in pellentesque elit dapibus eu. Sed aliquam mollis hendrerit. Sed quis sapien nisl. Duis a bibendum tortor, nec malesuada justo. Sed luctus lorem nec velit consequat, vel ultricies lorem pulvinar. Mauris leo sapien,
fermentum vel eleifend at, cursus quis massa. Ut sit amet venenatis orci, a dictum elit. Praesent a feugiat risus, non venenatis urna. Curabitur nisi sapien, facilisis vitae scelerisque nec, lacinia vel ante. Fusce tristique justo vitae
mi lacinia, non interdum erat ultrices. Proin nec tempus odio, suscipit consequat lacus. Cras aliquet tempus libero, quis mattis ipsum. Nam justo odio, mollis at bibendum in, condimentum nec mi. Ut auctor consectetur erat, eget bibendum
erat tristique ac. Nullam nisl sapien, pretium at enim nec, tincidunt molestie lacus. Mauris venenatis augue velit, eu malesuada velit faucibus id. Suspendisse ac suscipit magna. Integer elit risus, rutrum a mi vitae, pharetra tristique
mi. Ut semper euismod lacus vel dignissim. Maecenas quis erat eget dui vehicula aliquam. Praesent sed dolor euismod, condimentum ante quis, molestie orci. Ut vel venenatis nunc, ut porta lacus. Donec ligula felis, tristique ut sollicitudin
eget, commodo vel augue. Maecenas quis enim ac elit bibendum tristique.</div>
</div>
</div>
<div class="main-conent col-md-10 height-100">
Main Article content
</div>
</div>
<footer id="footer" class="navbar col-md-12 navbar-inverse navbar-fixed-bottom">
<div class="pull-left">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
</div>
<div class="pull-right">
<button class="btn btn-warning">Button 4</button>
<button class="btn btn-danger">Button 5</button>
<button class="btn btn-success">Button 6</button>
</div>
<div class="color-white text-align-center col-md-12">© <a href="mailto:@gmail.com">Darshan JOSHI</a> 2014</span>
</footer>
</article>
</div>
</body>
</html>
// Code goes here
var abc = function() {
$('#sidebar').height($(window).height() - 300);
alert('hi');
};
abc();
/* Styles go here */
.font-size-16px {
font-size: 16px;
}
.font-size-8px{
font-size: 8px;
}
.font-weight-bold{
font-weight:bold;
}
.text-align-center{
text-align: center;
}
.color-white{
color: white;
}
.height-100{
height:100%;
}
.height-80{
height:80%;
}
.height-50{
height:50%;
}
.main-conent{
min-height: 100%;
border: solid 1px lightblue;
}
.sidebar{
overflow-y: auto;
border-right:solid 1px lightgreen;
position: fixed;
position: static;
}