stackoverflow や他のサイトでいくつかのトピックを見てきましたが、提案された解決策はどれもうまくいかないようです。
問題は、何を試しても、コンテナー (ラッパー) div の上部のパディングと同じ高さのスクロールバーがページに追加されていることです。コンテナー div の min-height をいじることによってのみ機能させることができますが、これは明らかに常に機能するとは限りません。これがコードです。
HTML:
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
(フッターの内側と外側を試しましたが、結果は同じです。)
関連する CSS は次のとおりです。
html, body {
height: 100%;
}
body > #container {
height: auto;
min-height: 100%;
}
#content {
height: 100%;
position: relative;
}
body {
margin: 0;
padding: 0;
color: #FFF;
background: /*image here*/;
background-size: cover;
overflow: auto;
}
#container {
width: 100%;
padding-top: 50px;
position: relative;
}
#header {
background: /*image here*/;
height: 130px;
box-shadow: 4px 2px 5px #000;
border-top: 2px solid #F8F8F8;
border-bottom: 2px solid #F8F8F8;
overflow: hidden;
}
#footer {
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: #FFF;
clear: both;
}
そこにはいくつかの奇妙なオーバーフローがあるかもしれませんが、問題を解決しようとしてさまざまな時点でスローされています。サイトの背景全体を覆う背景画像と、ヘッダー用の背景画像を使用しています。
オーバーフロー、高さ、マージン/パディング、または相対/絶対/固定位置をいじると、結果が悪化するか、同じ結果になります。
私はJSなしでこれをやろうとしていますが、他のすべてが失敗した場合は、それに頼るつもりです. その場合は、関連する JS スタックオーバーフローの質問やチュートリアルを教えていただけませんか?
アドバイスをよろしくお願いします。