Looking for assistance in creating a webpage layout like the one shown in this fiddle...
http://jsfiddle.net/jeljeljel/5BSva/
I need the vertical line on the left side navigation tab to extend all the way down to the footer at the bottom of the page.
The footer should always remain at the bottom of the page, even if the content doesn't fill up the entire space. Additionally, if the content exceeds the viewport height, the footer should be pushed further down.
Can anyone help me solve this challenge?
HTML
<div class="wrapper">
<div class="header">
HEADER
</div>
<div class="body">
<ul class="nav nav-tabs" id="tabcontrol">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" style="">
<div class="navigation" style="">
navigation<br />
navigation<br />
navigation<br />
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div class="push">
</div>
</div>
<div class="footer center">
<div style="border-bottom: 2px solid rgb(174, 174, 201); background-color: #fff;"></div>
<div>
FOOTER
</div>
</div>
CSS
.body {
border: 1px solid rgb(174, 174, 201);
border-top: 5px solid rgb(174, 174, 201);
border-bottom: 5px solid rgb(174, 174, 201);
border-left: 2px solid rgb(174, 174, 201);
border-right: 2px solid rgb(174, 174, 201);
padding-bottom: 1000px;
margin-bottom: -1000px;
}
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px auto; /* the bottom margin is the negative value of the footer's height */
overflow: hidden;
}
.footer {
height: 50px;
background-color: #f8f8f8;
}
.footer, .push {
height: 50px; /* .push must be the same height as .footer */
clear: both;
}
form {
height: 100%;
}
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
.navigation {
float: left;
width: 150px;
border-right: 3px solid rgb(174, 174, 201);
padding-top: 10px;
white-space: nowrap;
}
.content {
padding-top: 10px;
}
.nav {
margin-bottom: 0px;
}