Creating a two

 

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

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 :)

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

将display:inline-block添加到.user-panel和.wrapper

链接地址: http://www.djcxy.com/p/43668.html

上一篇: 删除2个表格之间的空格HTML CSS和图像删除背景图像

下一篇: 创建一个二