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