We would like to know how to create full height sidebar with sticky footer.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {<!-- w ww . j av a2s .co m-->
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0px;
width: 100%;
z-index: 100;
}
#footer-content {
height: 32px;
padding: 8px;
background: #EEE;
}
.push {
height: 50px;
clear: both;
}
#header {
height: 50px;
width: 100%;
background: #DDD;
}
#header-content {
border: 1px solid magenta;
height: 32px;
padding: 8px;
}
#content {
height: 100%;
}
#main {
position: relative;
text-align: left;
width: 100%;
margin-left: 100px;
padding: 5px 10px;
}
#sidebar {
border: 1px solid skyblue;
width: 100px;
min-height: 100%;
float: left;
position: absolute;
z-index: 1;
background: skyblue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">Header</div>
</div>
<div id="content">
<div id="sidebar">
Sidebar<br />Sidebar<br />Sidebar<br />
</div>
<div id="main">Main</div>
<div class="push"></div>
</div>
</div>
<div id="footer">
<div id="footer-content">Footer</div>
</div>
</body>
</html>
The code above is rendered as follows: