0

私はしばらくこの問題と戦ってきました。どなたか助けていただける方がいらっしゃいましたら、アドバイスをお願いしたいと思います。

高さ 120 ピクセルのヘッダーとその下にコンテンツ div がある単純なレイアウトを作成しています。コンテンツをページの一番下まで引き伸ばしたいのですが、高さを 100% に設定すると、ページの上に引き伸ばされてしまいます。私はこれを何度もグーグルで試しましたが、見つけた答えはどれも役に立たなかったり、複雑すぎて理解できませんでした。

私のCSSは次のとおりです。

    * {
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 }

html {
    height: 100%;
    border: 5px solid red;
    margin-bottom: -16px;
}

body {
    background-color: lightblue;
    height: 100%;
    border: 5px solid blue;
    margin: 0 0 -16px 0;
}

.wrapper {
    display: block;
    position: relative;
    background-color: green;
    width: 605px;
    margin: auto;
    height: 100%
}

.header {
    display: inline-block;
    background-color: blue;
    height: 120px;
    width: 450px;
    text-align: center;
    padding: 5px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.content {
    display: inline-block;
    background-color: red;
    padding: 10px 5px;
    width: 450px;
    height: 100%;

適切に引き伸ばせることを確認するためだけに、html と body に境界線を設定したので、無視してください。

4

2 に答える 2

0

max-height: 100%;代わりに、height: 100%;定義されているヘッダーの高さをオーバーハイトしないように設定しますheight: 120px;

于 2013-11-15T09:02:06.060 に答える