54

100％の高さのdivをオーバーレイする際に問題が発生しています。表紙を解決するために固定位置を使用することもできますが、「表紙」を下にスクロールして、自分よりも解像度が低い人でもコンテンツ全体を表示できるようにする必要があるため、これは実際には必要ありません。

コード例：

HTML

<body>
<div>Overlay example text</div>
</body>

CSS

body {
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

問題： divの高さ100％には、Webブラウザー/ビューポートの100％しか含まれていませんが、全身をカバーする必要があります。

前もって感謝します ：）

4

6 に答える 6

70

追加してみてください

position:relative

あなたのボディスタイルに。何かを絶対的に配置するときはいつでも、親コンテナまたは祖先コンテナの 1 つを相対的に配置する必要があります (または静的のデフォルト位置以外のもの)。

配置された要素がなかったため、css は div が絶対に配置されているものを認識しないため、100% の高さを取得するものを認識しません。

于 2013-01-08T15:01:48.713 に答える
61

http://jsbin.com/ubalax/1/edit .ここで結果を確認できます 

body {
    position: relative;
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-color: yellow;
}
于 2013-01-08T15:04:16.570 に答える
12

高さと幅が 100% のソリューションを提供する回答はほとんどありませんが、css ではパーセンテージを使用せず、上下左右の配置を使用することをお勧めします。

これは、マージンを制御できる優れたアプローチです。

コードは次のとおりです。

body {
    position: relative;
    height: 3000px;
}
body div {

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}
于 2013-01-08T15:08:04.443 に答える
6

全身ストレッチ（横・縦）

受け入れられた答えは素晴らしいです。ここに来る他の人のためにいくつかのことを指摘したいだけです。これらの場合、マージンは必要ありません。特定の「マージン」を使用して中央揃えのレイアウトが必要な場合は、次のように左右に追加できます。

.stretched {
  position: absolute;
  right: 50px;  top: 0;  bottom: 0; left: 50px;
  margin: auto;
}

これは非常に便利です。

センタリング div (縦/横)

おまけとして、非常に単純なセンタリングを取得するために使用できる絶対センタリング:

.centered {
  height: 100px;  width: 100px;  
  right: 0;  top: 0;  bottom: 0; left: 0;
  margin: auto;
  position: absolute;
}
于 2014-01-30T20:39:04.983 に答える