我试图使用引导程序构建一个带有粘性页眉和页脚的页面。从引导粘性页脚示例中的页面模板开始。当前代码如下所示：
.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;
从#maindiv 中删除负top-margin。由于您指定了 -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 小提琴演示