Pourquoi la hauteur ne fonctionne-t-elle pas à 100% pour étendre les div à la hauteur de l'écran?

295

Je souhaite que le carrousel DIV (s7) s'étende à la hauteur de tout l'écran. Je n'ai aucune idée de pourquoi cela ne réussit pas. Pour voir la page, vous pouvez aller ici .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Développer l'extrait

html css height Earl Larson
la source

2

Voici une explication simple et claire: stackoverflow.com/a/31728799/3597276

Michael Benjamin

probablement la meilleure solution pour les éléments imbriqués qui ne doivent pas s'étendre à la hauteur de la fenêtre entière stackoverflow.com/questions/7049875/height-100-not-working/…

B-GangsteR

409

Pour qu'une valeur de pourcentage fonctionne pour la hauteur, la taille du parent doit être déterminée. La seule exception est l' élément racine<html> , qui peut être un pourcentage de hauteur. .

Donc, vous avez donné à tous vos éléments la hauteur, à l'exception de la <html>, donc ce que vous devez faire est d'ajouter ceci:

html {
    height: 100%;
}

Et votre code devrait bien fonctionner.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

Développer l'extrait

Exemple JsFiddle .

Le fantôme de Madara
la source

23

Ok, donc cela pourrait me faire paraître incroyablement stupide, mais peu importe : voulez-vous dire que <html>c'est un élément réel - tout comme <p>ou <img />? Je pensais que le seul but de <html>était de définir le début et la fin d'un document HTML. Je veux dire, je pensais que c'était là, pas pour la mise en page, mais juste pour que le navigateur sache quel type de document il regarde? Je suis complètement époustouflé.

jay_t55

29

@Joey: HTML est un élément réel. Vous pouvez le styliser avec CSS, y accrocher des événements en JavaScript, lui ajouter des classes et des ID, et il apparaît dans le DOM. Le navigateur assumera un document HTML même sans la <html>balise, et même sans les éléments <head>or <body>. Cependant, les spécifications HTML jugent la <html>balise obligatoire. En bref, oui, c'est un élément à part entière comme tous les autres éléments HTML.

Madara's Ghost

1

@SecondRikudo: Non, la <html>balise est facultative selon les spécifications (par exemple HTML4 et HTML5). Et oui, l'élément est quand même créé.

Robert Siemer

2

hmmm ... pour moi, la seule façon dont cela a fonctionné était de définir à la fois htmlet bodycomme height: 100%(ainsi que bien sûr le spécifique que divje veux hériter de la hauteur à 100%)

james

1

@james Oui, tous les parents doivent avoir une taille connue.

Madara's Ghost

147

_{Puisque personne ne l'a mentionné ..}

Approche moderne:

Comme alternative à la définition des deux hauteurs de l'élément html/ , vous pouvez également utiliser des longueurs de pourcentage de fenêtre:body100%

5.1.2. Longueurs en pourcentage de la fenêtre: les unités «vw», «vh», «vmin», «vmax»

Les longueurs en pourcentage de la fenêtre sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, elles sont mises à l'échelle en conséquence.

Dans ce cas, vous pouvez utiliser la valeur 100vh(qui est la hauteur de la fenêtre) - (exemple)

body {
    height: 100vh;
}

La définition d'un min-heightfonctionne également. (exemple)

body {
    min-height: 100vh;
}

Ces unités sont prises en charge dans la plupart des navigateurs modernes - une assistance peut être trouvée ici .

Josh Crozier
la source

1

Je ne vois aucun avantage à cela. Cela ne crée-t-il pas un travail supplémentaire pour le navigateur qui doit calculer tout ce qui concerne la fenêtre du navigateur? Le dimensionnement de la fenêtre ne semble utile que lorsque vous souhaitez réellement dimensionner quelque chose lié à la hauteur du navigateur.

Robert est allé le

12

@RobertWent Il y a des avantages. Par exemple, height: 100%ne fonctionne que si l'élément parent a une hauteur définie. Il existe certainement des cas où le parent d'un élément n'a pas de hauteur définie et où les unités de pourcentage de la fenêtre de résolution le résolvent. En d'autres termes, si vous aviez un élément profondément imbriqué, vous pourriez simplement le définir 100vh, et il aurait une hauteur de 100%navigateur. Vous ne voyez peut-être aucun avantage, mais j'ai été dans de nombreux cas où ils étaient la seule solution. Ces unités peuvent ne pas être aussi bénéfiques pour les éléments racinaires tels que html/ body, mais néanmoins, c'est une alternative

Josh Crozier

2

Mais nous parlons de l'élément corps, pas d'un élément profondément imbriqué. Il n'y a qu'un seul parent possible, l'élément html. C'est pourquoi j'ai mentionné que je ne vois aucun avantage et c'est peut-être pire que de simplement définir 100%. Votre commentaire ne dit rien pour me maigrir autrement. Le fait que quelque chose soit nouveau ne le rend pas meilleur. C'est cependant une alternative.

Robert est allé le

4

Un problème avec cette approche est que les iPhones excluent la barre d'adresse et la navigation inférieure de la hauteur de la vue, ce qui signifie qu'il body { height: 100vh }y aura une barre de défilement au chargement initial de la page.

BHOLT

2

Agréable. J'ai essayé l'autre approche, j'ai mis height: 100% !important" to each parent til html` sans succès, je pouvais voir dans le dom que chaque nœud de l'arbre était en fait 100%mais je n'ai pas réussi à définir le 100% dans l'élément souhaité, mais avec le style de la fenêtre d'affichage, c'était facile

pmiranda

25

Vous devrez également définir une hauteur de 100% sur l' htmlélément:

html { height:100%; }

shanethehat
la source

20

Sinon, si vous utilisez position: absolutealors height: 100%fonctionnera très bien.

Steve Tauber
la source

4

Ce serait une excellente solution si je n'utilisais pas flexbox pour créer ma mise en page. : /

Appel Landon

2

N'oubliez pas de mettre width:100%;et le parent position:relative;.

Kai Noack

8

Vous devriez essayer avec les éléments parents;

html, body, form, main {
    height: 100%;
}

Ce sera alors suffisant:

#s7 {
   height: 100%;
}

mrbengi
la source

5

si vous voulez, par exemple, une colonne de gauche (hauteur 100%) et le contenu (hauteur auto) vous pouvez utiliser absolu:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

en html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

YellowMart
la source

2

Ce n'est peut-être pas idéal, mais vous pouvez toujours le faire avec javascript. Ou dans mon cas jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

oBo
la source

5

Jamais une bonne idée d'utiliser javascript lorsque css seul suffira.

Bosworth99

1

Pourquoi même faire quelque chose comme ça et le compliquer plus qu'il ne devrait l'être? Je ne comprends pas certaines réponses lol ...

CapturedTree

1

Dans la source de la page, je vois ce qui suit:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Si vous mettez la valeur de hauteur dans la balise, elle l'utilisera à la place de la hauteur définie dans le fichier css.

Steven
la source

C'est étrange parce que c'est ce que je vois dans la source de la page: <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

Earl Larson

Ok, même si je ne sais pas comment vous avez obtenu votre code ci-dessus, je suis entré et j'ai changé <div id = "s7"> en <div id = "s7" style = "height: 100%;"> et cela a fonctionné. Peut-être que ça me cache quelque chose? Quoi qu'il en soit, merci :)

Earl Larson

1

Si vous positionnez absolument les éléments à l'intérieur du div, vous pouvez régler le rembourrage supérieur et inférieur à 50%.

Donc quelque chose comme ça:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

Keith Brown
la source

1

Je ne vois pas comment cela pourrait fonctionner puisque le 50% est relatif à la largeur et non à la hauteur de l'élément contenant, ou est-ce que je manque quelque chose ici?

DrLightman

0

Voici une autre solution pour les personnes qui ne veulent pas utiliser html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Développer l'extrait

TheMisir
la source

Pourquoi la hauteur ne fonctionne-t-elle pas à 100% pour étendre les div à la hauteur de l'écran?

Réponses:

Approche moderne: