创建一个二
所以我试图用twitter引导和Ryan Fait的粘性页脚创建一个布局
<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>
我似乎无法将用户面板和内容扩展到100％的高度，尝试了这些但他们不工作：
http://www.sitepoint.com/forums/showthread.php?868712-100-height-sidebar-background
http://fiddle.jshell.net/teresko/UG8Rk/show/ 我需要圆形的边框，所以......
这是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 */
任何帮助表示赞赏...谢谢...
编辑：
感谢Andrea Ligios的小提琴！
http://jsfiddle.net/RPFcN/2/
适用于Firefox，但不适用于Chrome ...
嗨，早上好，凯文！将这段代码放在侧面元素中
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
希望这可以帮助 ：）
你可以使用calc（）CSS3函数。
看看这里：http://jsfiddle.net/RPFcN/2/
您可以指定display: inline-block来保持块显示为一行，但是会显示块元素行为;
然后，将user-panel的height设置为100％减去页眉和页脚的高度，边距和边框（总计：98px）。
“内容”的高度将为100％减去94px，因为内容没有边框（而用户面板具有1px的边框）。
编辑：和你从包装类删除height: auto !important
将display:inline-block添加到.user-panel和.wrapper
上一篇: Creating a two