Question

我尝试使用bootstrap构建一个带有粘滞页眉和页脚的页面。从bootstrap sticky footer example开始使用页面模板。当前代码如下所示：

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;
}

Same code on jsFiddle

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

background-color: #355d98;

造成这种情况的原因是什么？

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

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

Answer 1

从top-margin div中删除否定#main。由于您已指定-ve margin，因此#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 Fiddle Demo

Body <header>使用引导程序布局</header>变为透明

1 个答案: