32

非常に単純なギャラリー webapp のレイアウトを並べ替える作業を行っていますが、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 が表示されません。おそらく、それらの高さが 0px であるためです。
  • doctype を HTML5 に設定してbody { height: 100px }and.container { height: 100px }またはを作成すると.container { height: 100% }、表示されるようになりますが、高さをピクセル単位ではなくフルハイトにする必要があります。
  • 上記と同じことをしようとするとbody { height: 100% }、写真とフッターのdivが再び表示されなくなります。

写真とフッターの div がフルハイトになるように、高さを 100% にするにはどうすればよいですか?

4

3 に答える 3

39

親要素に高さが定義されている場合のみ、つまり の値ではありませんauto。高さが 100% の場合、親の親の高さも定義する必要があります。htmlこれは、ルート要素まで行くことができます。

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

わかりやすくするために、次の例を参照してください。 

html, body, .outer, .inner, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}
<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>

私が 100% を与えなければ、これは機能しませんheight— たとえばhtml要素: 

body, .outer, .inner, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}
<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>

… また.inner 

html, body, .outer, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}
<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>

于 2012-06-03T16:30:36.127 に答える
7

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

<!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>
于 2012-06-08T08:50:51.173 に答える