1

我正在尝试使用引导程序构建带有粘性页眉和页脚的页面。从引导粘性页脚示例中的页面模板开始。当前代码如下所示：

HTML

<body>
 <header>header</header>
 <div id="main">
  <div id="content"></div>
 </div>
 <footer>footer</footer>
</body>

CSS

html, body { height:400px; color: white; }

div#main
{
min-height: 100%;
/*height: auto !important;*/
height: 100%;
margin : -56px 0;
padding:  56px 0;
background-color:black;
}

header { height: 56px; background-color: #355d98; }
footer { height: 56px; background-color: #355d98; }
div#content { height: 100%; overflow: hidden; }

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;
}

jsFiddle 上的相同代码

我的问题是标题具有透明背景，但事件分配了背景颜色。

background-color: #355d98;

这是什么原因造成的？

编辑 1：在这段代码中，我将高度固定为 400px，在我的页面上它是 100%，所以我需要这些行来创建粘性页眉和页脚（引导模板中的方法相同）

margin : -56px 0;
padding:  56px 0;
4

1 回答 1

1

top-margin从#maindiv 中删除负数。由于您指定了 -ve 边距，因此您#main覆盖了header.

div#main {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -56px; /*only applied bottom margin*/
padding: 56px 0;
background-color: black;
}

Js 小提琴演示

于 2013-09-28T21:50:22.827 回答