web-dev-qa-db-fra.com

Pourquoi hauteur: 100% ne permet-il pas d'étendre les divs à la hauteur de l'écran?

Je veux que le carrousel DIV (s7) s’étende à la hauteur de tout l’écran. Je n'ai aucune idée de la raison pour laquelle 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">
htmlcssheight
248
Earl Larson

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

Donc, vous avez donné la hauteur à tous vos éléments, à l'exception du <html>, vous devez donc 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>

exemple de JsFiddle.

355
Madara Uchiha

Depuis personne n'a mentionné cela ..

Approche moderne:

Au lieu de définir les hauteurs de l'élément html/body sur 100%, vous pouvez également utiliser des longueurs de pourcentage d'affichage:

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 de visualisation sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, ils sont mis à l'échelle en conséquence.

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

body {
    height: 100vh;
}

Définir un min-height fonctionne également. (exemple) 

body {
    min-height: 100vh;
}

Ces unités sont supportées par la plupart des navigateurs modernes - le support peut être trouvé ici .

124
Josh Crozier

Vous devrez également définir 100% height sur l’élément html:

html { height:100%; }
22
shanethehat

Sinon, si vous utilisez position: absolute, alors height: 100% fonctionnera parfaitement.

19
Steve Tauber

Vous devriez essayer avec les éléments parents;

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

Alors cela suffira:

#s7 {
   height: 100%;
}
6
HQtunes.epizy

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

#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>
4
YellowMart

Cela peut ne pas être 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>
1
oBo

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, il l'utilisera à la place de la hauteur définie dans le fichier CSS.

0
Steven

Si vous placez absolument les éléments à l'intérieur de la div, vous pouvez régler le remplissage en haut et en bas à 50%.

Donc, quelque chose comme ça:

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