wake-up-neo.com

Warum kann ich meine Div-Höhe nicht auf 100% setzen, wenn ich einen HTML5-Doctype verwende? Wie bekomme ich es 100% Höhe

Ich arbeite daran, das Layout für eine ziemlich einfache Galerie-Webanwendung zu sortieren, aber wenn ich eine HTML5-Doctype-Deklaration verwende, schrumpfte die Höhe einiger meiner divs (die zu 100% waren) direkt nach unten und ich scheine nicht plump zu sein Sie werden mit CSS gesichert.

Mein HTML-Code befindet sich unter https://dl.dropbox.com/u/16178847/eyewitness/b/index.html und css befindet sich unter https://dl.dropbox.com/u/16178847/eyewitness /b/style.css

  • Wenn ich die HTML5-Doctype-Deklaration entferne, ist alles so, wie ich es 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 Fußzeilen-Divs nicht sichtbar, vermutlich weil sie 0 Pixel hoch sind.
  • Wenn ich den Doctype auf HTML5 setze und body { height: 100px } und .container { height: 100px } oder .container { height: 100% } mache, wird er sichtbar, aber was ich brauche, ist die volle Höhe und nicht die Höhe in Pixel.
  • Wenn ich versuche, dasselbe wie oben zu tun, aber mit dem body { height: 100% } sind die Foto- und Fußzeilen-Divs nicht mehr sichtbar.

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

csshtml5quirks-mode
28
Grezzo

Nur wenn das übergeordnete Element eine definierte Höhe hat, ist es kein Wert von auto. Wenn die Höhe 100% beträgt, muss auch die übergeordnete Höhe des übergeordneten Elements definiert werden. Dies könnte bis zum html-Wurzelelement gehen.

Stellen Sie daher die Höhe des html- und des body-Elements auf 100% sowie jedes einzelne Vorfahrenelement dieses Elements ein, für das Sie 100%height an erster Stelle haben möchten.

35
yunzen

Damit es funktioniert, tun Sie es wie folgt:

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

Ich bin in ein ähnliches Problem geraten, um die Größe einer Leinwand zu ändern. Ich habe also genau das gemacht, was ich gemacht habe und perfekt gearbeitet habe.

Außer das zu tun:

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

Stellen Sie das gewünschte Element so ein:

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

Auf diese Weise haben Sie zu 100% Breite und Höhe des View-Ports. _. Vw steht für viewwidth Und Vh steht für viewheight

Ich hoffe das hilft jemandem

0
Nicholas Fernandes Paolillo