16

所以我正在尝试使用 twitter bootstrap 和 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 {
    高度：40px；
    边距顶部：0px；

    边框：1px 实心 #999;
    -webkit-border-radius：0px 0px 5px 5px；
    -moz-边框半径：0px 0px 5px 5px；
    边框半径：0px 0px 5px 5px；
    -webkit-box-shadow: #666 0px 1px 1px;
    -moz-box-shadow: #666 0px 1px 1px;
    盒子阴影：#666 0px 1px 1px；
    背景：#F3F3F1；
    背景：-webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
    背景：-webkit-线性渐变（#F3F3F1，#2B2B2B）；
    背景：-moz-线性渐变（#F3F3F1，#2B2B2B）；
    背景：-ms-线性梯度（#F3F3F1，#2B2B2B）；
    背景：-o-线性渐变（#F3F3F1，#2B2B2B）；
    背景：线性渐变（#F3F3F1，#2B2B2B）；
    -pie-background：线性渐变（#F3F3F1，#2B2B2B）；
    行为：网址（/PIE.htc）；
}
/* 标题结束 */

/* 页脚 */
.footer {
    边距顶部：12px；
    背景颜色：#000；

    边距底部：0px；
    右边距：20px；
    左边距：20px；
    明确：两者；
    高度：40px；
    边框：1px 实心 #999;
    -webkit-border-radius：5px 5px 0px 0px；
    -moz-border-radius: 5px 5px 0px 0px;
    边框半径：5px 5px 0px 0px；
    -webkit-box-shadow: #666 0px 1px 1px;
    -moz-box-shadow: #666 0px 1px 1px;
    盒子阴影：#666 0px 1px 1px；
    背景：#F3F3F1；
    背景：-webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
    背景：-webkit-线性渐变（#F3F3F1，#2B2B2B）；
    背景：-moz-线性渐变（#F3F3F1，#2B2B2B）；
    背景：-ms-线性梯度（#F3F3F1，#2B2B2B）；
    背景：-o-线性渐变（#F3F3F1，#2B2B2B）；
    背景：线性渐变（#F3F3F1，#2B2B2B）；
    -pie-background：线性渐变（#F3F3F1，#2B2B2B）；
    行为：网址（/PIE.htc）；
}
/* 页脚结束 */

/* Ryan Fait 的粘性页脚...带有一些自定义*/
* {
    边距：0；
}

html，正文 {
    高度：100%；
}

.wrapper {
    填充左：20px；
    padding-right: 20px;
    最小高度：100%；
    高度：自动！重要；
    高度：100%；
    边距：0 自动 -4em；
}

。推 {
    高度：40px；
    明确：两者；
}
/* 粘滞页脚结束*/

/* 用户面板（左侧带有导航等的侧面板）*/
.用户面板{
    边框：1px 实心 #999;
    -webkit-border-radius：5px 5px 5px 5px；
    -moz-边框半径：5px 5px 5px 5px；
    边框半径：5px 5px 5px 5px；
    -webkit-box-shadow: #666 0px 1px 1px;
    -moz-box-shadow: #666 0px 1px 1px;
    盒子阴影：#666 0px 1px 1px；
    背景：#F3F3F1；
    背景：-webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
    背景：-webkit-线性渐变（#F3F3F1，#2B2B2B）；
    背景：-moz-线性渐变（#F3F3F1，#2B2B2B）；
    背景：-ms-线性梯度（#F3F3F1，#2B2B2B）；
    背景：-o-线性渐变（#F3F3F1，#2B2B2B）；
    背景：线性渐变（#F3F3F1，#2B2B2B）；
    -pie-background：线性渐变（#F3F3F1，#2B2B2B）；
    行为：网址（/PIE.htc）；
    宽度：175px；
    向左飘浮;
    身高：继承；
    背景：灰色；
}
/* 用户面板结束 */

任何帮助表示赞赏...谢谢...

编辑：

感谢 Andrea Ligios 的小提琴！

http://jsfiddle.net/RPFcN/2/

在 Firefox 上运行良好，但在 Chrome 上无法运行...

4

4 回答 4

7

嗨，你好，凯文早安！，将此代码放在您的侧面板元素中

display: block;
position:absolute;
height:auto;
bottom:0;
top:0;

希望这可以帮助 ：）

于 2012-10-31T01:57:34.847 回答
2

您可以使用 calc() CSS3 函数。

看这里：http: //jsfiddle.net/RPFcN/2/

您指定display: inline-block保持块显示在行中，但具有块元素行为；

然后将 的 设置height为user-panel100% 减去页眉和页脚的高度、它们的边距和边框（总计：98 像素）。

“内容”的高度将为 100% 减去 94px，因为内容没有边框（而用户面板有 1px 的边框）。

编辑：你height: auto !important从包装类中删除

于 2012-10-30T12:55:10.000 回答
1

我用来完成这项工作的方式是......

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 */
}
于 2016-01-06T00:10:03.777 回答
0

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

于 2012-10-30T10:47:02.083 回答