1

ブラウザ ウィンドウと同じ高さの div を表示しようとしていますが、上部に 200px の余白を使用しています。それで、最初は height: 100%; で試しました。しかし、これは div がブラウザ ウィンドウよりも大きくなるため、余裕があるとうまく機能しません。

それから私はそれを試しました：

div {
  background: red;
  position: absolute;
  top: 20px;
  bottom: 0;
  height: auto;
}

ここでわかるように、これはかなりうまく機能します: http://jsfiddle.net/fB9ea/1/

問題は次のとおりです。テキストが多すぎて div よりも大きくなると、テキストが div からはみ出してしまいます。

どうすればその問題を解決できますか?

4

4 に答える 4

1

100% の高さを機能させるのは、クロス ブラウザーを正しく行うのが難しいため、最も外側の要素で行う必要があります。私の提案は、#wrapdiv がブラウザー ウィンドウの 100% の高さに設定さ.topれ、body 要素と同じ背景色の高さ 200px の divが含まれている、以下のコードのようなものを試すことです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
html, body {
    height:100%;
} 

html,body {
    margin:0;padding:0;
}

#wrap {
    min-height:100%;
    background: red;
    width: 50%;
    margin: 0 auto;
}

* html #wrap {height:100%;}

.top {
    height: 200px;
    background: white;
}

</style>
</head>
<body>
<div id="wrap"> 
    <div class="top">
    </div>
    Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
</div>
</body>
</html>
于 2013-05-02T10:00:36.657 に答える
0

この問題は、 で簡単に修正できますmin-height。これにより、div がページの高さの少なくとも 100% になるようになりますが、テキストが増えると大きくなります。コードは次のようになります。

div {
    background: red;
    position: absolute;
    top: 20px;
    min-height: 100%;
    height: auto;
}

http://jsfiddle.net/dakoder/JHjkJ/

于 2013-05-02T10:13:20.707 に答える