Mark full height column
Description
The following code shows how to mark full height column.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style type='text/css'>
* {<!--from w w w . j a v a 2 s .com-->
font-family: Tahoma;
font-weight: 100;
margin: 0;
}
html, body {
height: 100%;
}
.sidebar {
border: 1px solid #C0C0C0;
padding: 5px;
margin-top: 10px;
}
.main {
border: 1px solid #C8C8C8;
padding: 5px;
margin-top: 10px;
padding-top: 70px;
padding-right: 25px;
}
.full-height {
height: 100%;
min-height: 100%;
}
.itemContainer {
background-color: #F5F5F5;
}
.mainContainer {
min-height: 100%;
height: 100%;
margin: 0 auto -40px;
}
.ToolItem {
margin-right: 20px;
}
.footer, .push {
clear: both;
height: 30px;
}
.footer {
margin: 5px;
margin-top: 60px;
padding-top: 5px;
}
</style>
</head>
<body>
<div class="container-fluid mainContainer">
<div class="row-fluid full-height">
<div class="span3 sidebar itemContainer full-height">
<h2>Heading 2</h2>
Content
</div>
<div class="span9 main itemContainer full-height">
<h2>Heading 2</h2>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer itemContainer">
<div class="container">
<div class="row">
<div class="span12">Span12</div>
</div>
</div>
</footer>
</body>
</html>