17

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...

4 Answers 4

7

You can place this code inside your side-panel element:

.user-panel {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    ...
    // Rest of the properties
}

Hope this helps :)

1
  • 3
    Hi hello good morning my beloved officemate from across my cube. Thank you... I adjusted some values to account for the header and footer height. It works, thanks.
    – Kevin D.
    Oct 31, 2012 at 1:59
2

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

1
  • works well with Firefox, sidepanel and content aren't still 100% height in Chrome... also, is there any other way to do this without using CSS3?
    – Kevin D.
    Oct 31, 2012 at 0:29
1

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 */
}
0

add display:inline-block to the .user-panel and .wrapper

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.