Warum kann ich mein div nicht auf 100 % Höhe bringen, wenn ich einen HTML5-Doctype verwende? Wie bekomme ich es 100% Höhe

Question 1

Ich arbeite daran, das Layout für eine ziemlich einfache Galerie-Webanwendung zu sortieren, aber wenn ich eine HTML5-Doctype-Deklaration verwende, wird die Höhe einiger meiner Divs (die 100 %) waren, ganz nach unten geschrumpft, und ich kann nicht scheinen zu plumpsen sie mit CSS sichern.

Mein HTML ist bei https://dl.dropbox.com/u/16178847/eyewitness/b/index.html und css ist bei https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

Wenn ich die HTML5-Doctype-Deklaration entferne, ist alles so, wie ich es haben möchte, aber ich möchte wirklich die richtige HTML5-Doctype-Deklaration verwenden.
Wenn ich den Doctype auf HTML5 setze und keine Änderungen vornehme, sind das Div mit dem Foto und die Footer-Divs nicht sichtbar, vermutlich weil sie 0px hoch sind.
Wenn ich den Doctype auf HTML5 setze und die body { height: 100px } und .container { height: 100px } oder .container { height: 100% }, wird es sichtbar, aber was ich brauche, ist die volle Höhe und nicht die Höhe in Pixeln.

Wenn ich das gleiche versuche wie oben, aber mit dem body { height: 100% } Die Foto- und Fußzeilen-Divs sind nicht wieder sichtbar.

Was muss ich tun, um die Höhe zu 100 % zu erreichen, damit meine Foto- und Fußzeilen-Divs die volle Höhe haben?

Question 2

Nur wenn das übergeordnete Element eine definierte Höhe hat, also keinen Wert von auto. Wenn dieser 100 % hoch ist, muss auch die Höhe des Elternteils definiert werden. Das könnte bis zum gehen html Wurzelelement.

Stellen Sie also die Höhe des ein html und das body Element zu 100%, sowie jedes einzelne Vorfahrenelement dieses Elements, das Sie haben möchten 100% height an erster Stelle.

Siehe dieses Beispiel, um es klarer zu machen:

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>

Das würde nicht funktionieren, wenn ich nicht 100% geben würde height sagen html Element:

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>

… oder .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>

Question 3

Damit es funktioniert, gehen Sie wie folgt vor:

<!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>

Question 4

Ich steckte in einem ähnlichen Problem fest, um eine Leinwand zu bemessen, also habe ich Folgendes getan und perfekt funktioniert.

Abgesehen davon, dass:

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

Stellen Sie das gewünschte Element wie folgt ein:

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

Auf diese Weise haben Sie garantiert 100 % des Sichtfensters in Breite und Höhe. vw steht für Ansichtsbreite und vh steht für Ansichtshöhe

Ich hoffe, das hilft jemandem