2

HTML と CSS を始めたばかりで、簡単な質問があります。親要素のサイズを大きくして、その子の 1 つを収容する方法はありますか? 背景をオンにしてい<html>ます。次に、本文内に、別の背景色を設定し、ページ全体ほど幅/高さのない div があります。これにより、2 トーンのデザインが残ります。次に、表示するすべてのコンテンツを含むネストされた div があります。ページのコンテンツがスクロールバーが必要なほど十分でない限り、これはすべて正常に機能します。その場合、両方の背景色が画面の元の下部を超えて失われます。この問題は非常に煩わしく、私が読んだことによると、それを処理する優れた方法はありませんが、誰かが知っているかどうかを知りたいと思っていました. 次のプロパティが設定されています。

html {
    background: [gradient code...]
    height: auto;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}

body {
    height: auto;
    width: 100%;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

div.background {
    background-color: #D0D0D0;
    text-align: center;
    height: auto;
    width: 70%;
    position: absolute;
    top: 150px;
    bottom: 30px;
    left: 15%;
    margin: 0;
    padding: 0;
    border-radius: 7px;
}

div.container {
    height: auto;
    width: 70%;
    position: absolute;
    left: 15%;
    bottom: 0;
    top: 0;
}

2番目div.backgroundの背景色div.containerがあり、コンテンツがページに表示されます。

ご協力いただきありがとうございます。

4

3 に答える 3

3

使わないのはどうposition: absoluteですか？topそれ（および関連する、、、 ...）を削除し、left代わりbottomに正しいマージンに置き換えます。

于 2012-07-26T19:51:29.073 に答える
1

親でサイズ（幅、高さ）の自動を指定すると（またはサイズを指定せずにそのままにしておくと）、子のサイズに合わせて拡大/縮小すると思います（再帰的には機能しないため、ツリーの最後の親)。絶対配置 (http://www.w3schools.com/Css/css_positioning.asp) を回避することもうまくいく可能性があり、float 要素または別の z-index もおそらく回避策を実行できますが、親が大きくなりすぎると思います。 ..

于 2012-07-26T19:51:34.697 に答える
0

絶対的な div.background の幅と位置を取り除き、絶対的な位置を div.container の相対的な位置に変更すると、うまくいくはずです。

于 2012-07-26T19:52:49.213 に答える