web-dev-qa-db-ja.com

絶対divで高さを100％に設定

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％にはwebbrowser/viewportの100％しか含まれていませんが、体全体をカバーしたいです。

前もって感謝します ：）

htmlcssabsolute
39
Nworks

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;
}
44
ashley

追加してみてください

position:relative

あなたの体のスタイルに。絶対に何かを配置するときはいつでも、親コンテナの1つを相対的に配置する必要があります。これにより、相対する親コンテナに対してアイテムが絶対的に配置されます。

相対的な要素がなかったので、CSSはdivが絶対にどの位置にあるかを知らないため、100％の高さを取るべきか分からない

48
Pete

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

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

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

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

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}
11
Jerome Cance

bodyを使用する代わりに、htmlを使用するとうまくいきました。

html {
   min-height:100%;
   position: relative;
}

div {
   position: absolute;

   top: 0px;
   bottom: 0px;
   right: 0px;
   left: 0px;
}
5
Misja

完全なストレッチ（水平/垂直）

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

.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;
}
3
Kevin Redman

高さを使用せずに、使用可能な高さの100％を埋める別のソリューション。これをチェックアウトします（例：codepen）。 http://codepen.io/gauravshankar/pen/PqoLLZ

このHTMLと本文の高さは100％である必要があります。この高さは、ビューポートの高さと同じです。

内側のdiv位置を絶対にし、上下に0を指定します。これにより、divが使用可能な高さまで埋められます。 （身長は体に等しい。）

htmlコード：

<head></head>

<body>
  <div></div>
</body>

</html>

cSSコード：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  position: relative;
}

html {
  background-color: red;
}

body {
  background-color: green;
}

body> div {
  position: absolute;
  background-color: teal;
  width: 300px;
  top: 0;
  bottom: 0;
}
1
Gaurav