0

bgの上に白いコンテナがありますが、min-heightが100％に設定されていても停止します。ここに、このコンテナのCSSがあり、下部にスクロールするとどうなるかを示す画像が含まれています。は：黄色のBg：

               .home-body {
                background-color:#EAC117;
                height: 100%;

            .home-main-content {
            width:800px;
            min-height: 100%;
            position:absolute;
            overflow:hidden;
            margin-left:56.5%;
            left:-500px;
            top:51px;
            border-left:1px solid black;
            border-right:1px solid black;
            background-color:#fff;
            background-repeat:repeat-y;



            .home-post-echoed-container {
            width:400px;
            position:absolute;
            margin-left:50%;
            left:-200px;
            top:200px;
            overflow:hidden;
            }
            .home-echoed-posts {
            width:600px;
            overflow:hidden;
            left:-98px;
            position:relative;
            background-color:#fff;
            margin-bottom:-5px;
            border-top:1px solid;color:#0a527e;
            border-left:1px solid;color:#0a527e;
            border-right:1px solid;color:#0a527e;
            }
            .home-echoed-posts-post {
            margin:10px;
            color:black;
            }
            .home-echoed-posts-email {
            margin:10px;
            color:black;
            }
            .home-echoed-posts-date {
            margin:10px;
            color:black;
                            }

これは、bgの終わりがクリアされたときに起こることです

4

2 に答える 2

5

あなたはそれを誤解している。

（絶対位置の代わりに）使用する必要があるものを中央に配置するには：

.foobar{
   margin: 0 auto;
   width: 800px;
}

「コメントがコンテナを拡張しない理由」については、コードなしで推測するのは難しいですが、2つの合理的な可能性があります。ポジショニングまたはフロートです。それについて私ができることは何もありません。しかし、それらがフロートしている場合、次のcssを備えたコンテナーを簡単に作成できます。

.container{
   overflow: hidden;
}

少し直感に反しますが、魅力のように機能します。あなたはここでそれについてもっと読むことができます。

更新：そしてこの記事も読んでください。

アップデート2：

麦汁の場合のシナリオのようです。あなたはすべてのためにポジショニングを使用しています。あなたは本当にフロートの使い方を学ぶ必要があります。

.home-post-echoed-container {
    width: 600px;
    margin: 0 auto;
    padding-top: 200px; // im guessing what top:200px was doing
    overflow:hidden;
}
.home-echoed-posts {
    width:600px;
    float: left;
    background: #fff;
    margin-bottom: -5px;
    border: 1px solid #0a527e;
    border-bottom: 0;
}

このようなもの。しかし、私は本当に推測しているだけです。

于 2012-06-17T00:34:49.633 に答える
1 
html, body 
{
    height:100%;
}

CSSスクリプトの先頭にそれを含めるようにしてください。そうしないと、CSSに設定が機能.home-main-contentしmin-height:100%;なくなります。これは、CSSが他の場所で定義されていない場合、100%単に現在のdivの高さであるためです。

.home-main-contentまた、別のdivに囲まれている場合は、同じプロパティが設定されていることを確認してください。

于 2012-06-17T00:33:33.673 に答える