1

私はCSSの専門家ではありませんが、この望ましくない動作を引き起こす可能性のあるアイデアが不足しています. divサイトのメイン セクションの背景としてを使用したいと考えています。div content私の中にたくさんのコンテンツがあると、div content_wrapper完全に展開しません。これは私のHTMLのセクションです

<div class="content_wrapper">
    <div class="content">
        <h1>Some heading</h1>
        <p>lot's of text</p>
    </div>
<footer>
    <div id="foot">
        <a id="disclaimer" href="disclaimer.html"> disclaimer</a> 
    </div>
    </footer>
</div>

そして.css。

.content_wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 215px;
    background-color: #EEE;

}
.content{
    z-index: 5;
    float:left;
    margin: 50px 0 50px 20px;
    width: 75%;
    padding: 20px;
    background-color: #FFF;
    border-left: dashed 1px #CCC;
    border-top: dashed 1px #CCC;

    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
}

何が起こっているのか、そしてその理由は何ですか?

4

4 に答える 4

1

.content_wrapper を次のコードに変更します。

.content_wrapper{
    width: 100%;
    height: 100%;
    margin-top: 215px;
    background-color: #EEE;
}

親に展開できるようにするために position:absolute を使用しないでください。そして、position:absolute の使用を終了するときは、top の代わりに margin-top を使用する必要があります。

于 2013-04-22T14:01:18.903 に答える
1

content-wrapper を絶対ではなく position:relative に設定してみてください。そして、 .content のフロートを取り除きます。

それか、その下にクリア div を配置します。

.content_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    top: 215px;
    background-color: #EEE;
}

.content {
    z-index: 5;
    margin: 50px 0 50px 20px;
    width: 75%;
    padding: 20px;
    background-color: #FFF;
    border-left: dashed 1px #CCC;
    border-top: dashed 1px #CCC;
    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
}
于 2013-04-22T14:19:18.863 に答える
1

ここでの問題は、 と の組み合わせposition: absoluteですwidth/height: 100%。

100% は、要素の親である を参照しbodyます。そのcontent_wrapperため、本体と同じ大きさになります。しかし、それは絶対的な位置付けでもあり、したがって流れから外されます。これはbody、コンテンツのサイズによって のサイズが変わらないことを意味します。つまり、content_wrapperどちらも成長せず、コンテンツはオーバーフローのためにのみ表示されます。

幅と高さを使用しないでください。問題ありません。

于 2013-04-22T14:22:57.027 に答える
-1

これを試して

.content_wrapper{
幅: 100%;
高さ: 100%;
マージントップ: 215px;
背景色: #EEE;
z-index:-999;
位置:絶対;
}

z-index はそれを一番下に重ねる必要があります。
それがあなたが探しているものではない場合、または機能しない場合は教えてください

于 2013-04-22T14:10:58.180 に答える