web-dev-qa-db-fra.com

Pourquoi est-ce que je ne peux pas faire ma div 100% hauteur si j'utilise un doctype HTML5? Comment puis-je l'obtenir 100% hauteur

Je travaille sur la mise en page pour trier une galerie webapp assez simple, mais lorsque j'utilise une déclaration doctype HTML5, la hauteur de certains de mes divs (qui sont à 100%) est réduite au minimum, et je ne peux pas sembler gonfler. les sauvegarder en utilisant CSS.

Mon HTML est à https://dl.dropbox.com/u/16178847/eyewitness/b/index.html et css est à https://dl.dropbox.com/u/16178847/eyewitness /b/style.css

  • Si je supprime la déclaration de type de document HTML5, tout est comme je le souhaite, mais je veux vraiment utiliser la déclaration de type de document HTML5 appropriée.
  • Si je règle le type de document sur HTML5 et n'apporte aucune modification, les div avec la photo et les div en bas de page ne sont pas visibles, probablement parce qu'elles ont une hauteur de 0px.
  • Si je règle le type de document sur HTML5 et que je crée le body { height: 100px } et le .container { height: 100px } ou le .container { height: 100% }, il devient visible, mais ce dont j'ai besoin, c'est une hauteur maximale plutôt qu'une hauteur en pixels.
  • Si j'essaie de faire comme ci-dessus, mais avec le body { height: 100% }, les divs photo et pied de page ne seront plus visibles.

Que dois-je faire pour l’obtenir à 100% en hauteur afin que mes photos et mes pieds de page soient à pleine hauteur?

csshtml5quirks-mode
28
Grezzo

Seulement si l'élément parent a une hauteur définie, i..e pas une valeur de auto. Si cela a une hauteur de 100%, la hauteur du parent du parent doit également être définie. Cela pourrait aller jusqu'à l'élément racine html.

Définissez donc la hauteur des éléments html et body sur 100%, ainsi que tous les éléments ancêtres uniques de cet élément pour lesquels vous souhaitez que 100%height commence.

35
yunzen

En effet, pour que cela fonctionne, procédez comme suit:

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

Je me suis retrouvé coincé dans un problème similaire pour dimensionner une toile, alors voici ce que j'ai fait et travaillé parfaitement.

En plus de faire le:

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

Définissez l'élément souhaité comme ceci:

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

De cette façon, vous êtes assuré d’avoir 100% du port d’affichage en largeur et en hauteur . Vw correspond à viewwidth Et Vh correspond à viewheight

J'espère que ça aidera quelqu'un

0
Nicholas Fernandes Paolillo