Body <header> 使用引导布局变得透明答案

【问题标题】：Body <header> becomes transparent using bootstrap layoutBody <header> 使用引导布局变得透明
【发布时间】：2013-09-29 06:10:24
【问题描述】：

我正在尝试使用引导程序构建带有粘性页眉和页脚的页面。从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%，所以我需要这些行来创建粘性页眉和页脚（在引导模板中使用相同的方法）

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

从#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

【讨论】：

这不能解决我的问题，我需要那些负边距来制作粘性页眉和页脚（我的项目页面高度是 100% 而不是 400px）
@GytisŠk 如果你看到小提琴，我也用height:100% 表示身体，而不是 400px。
对不起，但这也不起作用。整个页面必须是 100%，而 div#main 必须是 (100% - header.height - footer.height)
@GytisŠk okey 知道了，所以只需删除上边距并保持下边距不变。请参阅更新后的帖子。我更改了边距属性。
如果向下滚动，您会看到 html、body 溢出 - 总高度超过 100%。