html - Body <header> 使用 bootstrap 布局变得透明

我正在尝试使用 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

我的问题是 header 有透明背景，但事件有指定的背景颜色。

background-color: #355d98;

这是什么原因造成的？

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

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

最佳答案

从 #main div 中移除负值 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 Fiddle Demo

关于html - Body <header> 使用 bootstrap 布局变得透明，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19071993/