Menu
so I'm trying to create a layout with twitter bootstrap and Ryan Fait's sticky footer
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="user-panel">
<h1>Side Panel</h1>
</div>
<div class="content">
Hello World!
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
I can't seem to expand the user-panel and content to to 100% height, tried these but they don't work:
http://www.sitepoint.com/forums/showthread.php?868712-100-height-sidebar-background
http://fiddle.jshell.net/teresko/UG8Rk/show/ I need the rounded borders so...
Here's the CSS...
/* Header */
.header {
height: 40px;
margin-top: 0px;
border: 1px solid #999;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
-webkit-box-shadow: #666 0px 1px 1px;
-moz-box-shadow: #666 0px 1px 1px;
box-shadow: #666 0px 1px 1px;
background: #F3F3F1;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
background: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
background: -moz-linear-gradient(#F3F3F1, #2B2B2B);
background: -ms-linear-gradient(#F3F3F1, #2B2B2B);
background: -o-linear-gradient(#F3F3F1, #2B2B2B);
background: linear-gradient(#F3F3F1, #2B2B2B);
-pie-background: linear-gradient(#F3F3F1, #2B2B2B);
behavior: url(/PIE.htc);
}
/* End of Header */
/* Footer */
.footer {
margin-top: 12px;
background-color: #000;
margin-bottom: 0px;
margin-right: 20px;
margin-left: 20px;
clear: both;
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
-webkit-box-shadow: #666 0px 1px 1px;
-moz-box-shadow: #666 0px 1px 1px;
box-shadow: #666 0px 1px 1px;
background: #F3F3F1;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
background: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
background: -moz-linear-gradient(#F3F3F1, #2B2B2B);
background: -ms-linear-gradient(#F3F3F1, #2B2B2B);
background: -o-linear-gradient(#F3F3F1, #2B2B2B);
background: linear-gradient(#F3F3F1, #2B2B2B);
-pie-background: linear-gradient(#F3F3F1, #2B2B2B);
behavior: url(/PIE.htc);
}
/* End of Footer */
/* Sticky footer by Ryan Fait... with a little customization*/
* {
margin: 0;
}
html,body {
height: 100%;
}
.wrapper {
padding-left: 20px;
padding-right: 20px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 40px;
clear: both;
}
/* End of Sticky footer*/
/* User Panel ( that sidepanel on the left side with navigation etc) */
.user-panel {
border: 1px solid #999;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: #666 0px 1px 1px;
-moz-box-shadow: #666 0px 1px 1px;
box-shadow: #666 0px 1px 1px;
background: #F3F3F1;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
background: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
background: -moz-linear-gradient(#F3F3F1, #2B2B2B);
background: -ms-linear-gradient(#F3F3F1, #2B2B2B);
background: -o-linear-gradient(#F3F3F1, #2B2B2B);
background: linear-gradient(#F3F3F1, #2B2B2B);
-pie-background: linear-gradient(#F3F3F1, #2B2B2B);
behavior: url(/PIE.htc);
width: 175px;
float: left;
height: inherit;
background: gray;
}
/* End of User Panel */
Any help is appreciated... thanks...
EDIT:
Thanks to Andrea Ligios for the fiddle!
http://jsfiddle.net/RPFcN/2/
Works well with Firefox, but doesn't work on Chrome...
435
Hi Hello Good morning Kevin!, place this code inside your side-panel element
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
Hope this helps :)
197
You can use calc() CSS3 function.
Look at here: http://jsfiddle.net/RPFcN/2/
You specify display: inline-block to keep the blocks displayed in line, but with block element behaviour;
Then you set the height of the user-panel to be 100% minus the height of header and footer, their margins and borders (total: 98px).
The height of the "content" will be 100% minus 94px, because content has no borders (while user-panel has 1px of borders).
EDIT: and you remove height: auto !important from wrapper class
42
The way I have used to make this work is...
HTML:
<footer>
<div class="container">
<p class="text-muted">Footer text you want here.</p>
</div>
</footer>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 8em; /* Must be set to the same as footer height */
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8em; /* Must be set at the same as margin-bottom in body */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
