3

私の問題は、バックグラウンド コンテナーが画面の下部までしか表示されないことです。その後の部分では見えません。私はほとんどすべてを試しましたが、何もうまくいかないようです。ページサイズに合わせて調整したい。

<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;
}
4

2 に答える 2

2

高さを指定しない場合、コンテンツの高さによって決定される「auto」がデフォルトになります。

コンテンツ内で何かをフロートする場合はclear:both、親が高さを正しく判断できるように、必ず ccs スタイルの要素を追加してください。

同様に、要素のいずれかの子が絶対配置を使用している場合、絶対配置された子は親と同じスコープにないため、その高さを自動的に決定することはできません。

作業スタイルの例は次のとおりです。

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>
于 2013-01-09T17:07:30.370 に答える
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 2ここでは、相対的な位置付けのフィドルがあります。

于 2013-01-09T16:57:28.707 に答える