web-dev-qa-db-ja.com

HTML5 doctypeを使用すると、divの高さを100％にできないのはなぜですか？高さを100％にするにはどうすればよいですか

非常にシンプルなギャラリーWebアプリケーションのレイアウトの並べ替えに取り組んでいますが、HTML5 doctype宣言を使用すると、一部のdiv（100％）の高さがすぐ下に縮み、ふっくらしていないように見えますCSSを使用してバックアップします。

私のHTMLは https://dl.dropbox.com/u/16178847/eyewitness/b/index.html にあり、cssは https://dl.dropbox.com/にありますu/16178847/eyewitness/b/style.css

  • HTML5のdoctype宣言を削除すると、すべてが期待どおりになりますが、実際には適切なHTML5のdoctype宣言を使用したいと思います。
  • DoctypeをHTML5に設定し、変更を加えないと、写真付きのdivとフッターdivが表示されません。
  • DoctypeをHTML5に設定してbody { height: 100px }および.container { height: 100px }または.container { height: 100% }、表示されますが、必要なのは、ピクセル単位の高さではなく、完全な高さです。
  • 上記と同じことをしようとすると、body { height: 100% }写真とフッターのdivは再び表示されません。

写真とフッターのdivを完全な高さにするには、100％の高さにするために何をする必要がありますか？

csshtmlquirks-mode
30
Grezzo

親要素に高さが定義されている場合、つまりautoの値でない場合のみ。それの高さが100％の場合、親の親の高さも定義する必要があります。これは、htmlルート要素まで続きます。

したがって、html要素とbody要素の高さを100%に設定し、最初に100%heightにしたいその要素のすべての祖先要素を設定します。

35
yunzen

実際、それを機能させるには、次のようにします。

<!DOCTYPE html>
<html>
<head>
  <title>Vertical Scrolling Demo</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: white;
      margin:0;
      padding:0;
    }
    .page {
      min-height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="nav" class="page">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <div id="page1" class="page">
    <h1><a name="about">about</a></h1>
    About page content goes here.
  </div>
  <div id="page2" class="page">
    <h1><a name="portfolio">portfolio</a></h1>
    Portfolio page content goes here.
  </div>
  <div id="page3" class="page">
    <h1><a name="contact">contact</a></h1>
    Contact page content goes here.
  </div>
</body>
</html>
7
barraq

私はキャンバスのサイズを変更するために同様の問題に悩まされました。

を行うことに加えて：

body{ width: 100%; heigh: 100%;}

次のように目的の要素を設定します。

.desired-element{ width: 100vw; heigh: 100vh}

このようにして、ビューポートの幅と高さが100％になることが保証されます。 vwはviewwidthを表し、vhはviewheightを表します

これが誰かを助けることを願っています

2
Nicholas Fernandes Paolillo