私の問題は、私のバックグラウンドコンテナが画面下までしか表示されません。私はその後の部分でそれを見ることができません。私はほとんどすべてを試しましたが、私のためには何もうまくいかないようです。
<body>
<div id="profilebg">
<!-- Other divs -->
</div>
</body>
そして私のCSSは
html, body {
height:100%;
}
#profilebg
{
position: absolute;
margin-left:10%;
margin-right:10%;
width:80%;
background-color:#ffffff;
height: 100%;
top: 0;
bottom: 0;
display: block;
}
回答：
回答№1は2高さを指定しないと、デフォルトの "auto"に設定されます。これはコンテンツの高さによって決まります。
コンテンツの中に何かを浮かべるのであれば、必ずccsスタイルの要素を追加してください。 clear:both 親が正しく身長を判断できるようにするためです。
要素のいずれかの子が使用する場合も同様絶対配置では、絶対配置の子はもはや親と同じスコープ内にないため、自動的に高さを決定することはできません。
サンプルの作業スタイルは次のようになります。
html, body {
height:100%;
}
#profilebg
{
margin: 0 10%;
background-color:#ffffff;
}
編集： より簡潔なCSSスタイル - 幅は余白で冗長
編集2： 絶対位置に関する行を追加
編集3： 以下のコメントで要求を達成するためのdiv構造
<div id="page-container">
<div id="header-container">
<!-- Put your header here -->
</div>
<div id="body-container">
<div id="profilebg">
<!-- Profile BG Container -->
</div>
<!-- Any other body content here -->
</div>
<div id="footer-container">
<!-- Footer content here -->
</div>
</div>
回答№2の場合は0
以下はあなたが達成したいことのために働くようです。私は「削除しました bottom:0; 変更された height に min-height.
html, body {
height:100%;
}
#profilebg {
position: absolute;
margin-left:10%;
margin-right:10%;
width:80%;
min-height:100%;
background-color:#ffffff;
top: 0;
display: block;
}
EDIT がここにあります フィドル
EDIT 2 がここにあります フィドル 相対位置で