Pourquoi le paramètre height : 100% ne fonctionne-t-il pas pour étendre les divs à la hauteur de l'écran ?

Question

Pourquoi le paramètre height : 100% ne fonctionne-t-il pas pour étendre les divs à la hauteur de l'écran ?

Demandé el 13 de Août, 2011: Quand la question a-t-elle été
54228 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux que le carrousel DIV (s7) s'étende à la hauteur de l'écran entier. Je n'ai pas la moindre idée de la raison pour laquelle cela ne fonctionne pas. Pour voir la page, vous pouvez aller aquí .

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

Demandé el 13 de Août, 2011 par Earl Larson

6 votes

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

Commenté el 28 de Août, 2015 par Michael_B

0 votes

Probablement la meilleure solution pour les éléments imbriqués qui ne doivent pas s'étirer sur toute la hauteur de la fenêtre. stackoverflow.com/questions/7049875/height-100-not-working/

Commenté el 5 de Décembre, 2017 par B-GangsteR

Answer 1

5 Réponses

Answer 2

556voto

Second Rikudo Points 59550

Pour qu'une valeur en pourcentage fonctionne pour la taille, il faut déterminer la taille du parent. La seule exception est l'élément Racine élément <html> qui peut être un pourcentage de la hauteur.

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

html {
    height: 100%;
}

Et votre code devrait fonctionner correctement.

* { 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 .

Répondu el 13 de Août, 2011 par Second Rikudo (59550 Points )

37 votes

Ok, je vais peut-être avoir l'air incroyablement stupide, mais quoi que ce soit : Voulez-vous dire que <html> es un réel tout comme l'élément <p> o <img /> ? Je pensais que le seul but de <html> était de définir le début et la fin d'un document HTML. Je pensais qu'il était là, non pas pour la mise en page, mais simplement pour que le navigateur sache quel type de document il regarde ? Je suis complètement abasourdi.

Commenté el 17 de Mai, 2013 par baeltazor

38 votes

@Joey : HTML es un élément réel. Vous pouvez le styliser à l'aide d'une feuille de style CSS, lui associer des événements en JavaScript, lui ajouter des classes et des ID, et il apparaît dans le DOM. Le navigateur considérera un document HTML même sans l'élément <html> et même sans la balise <head> o <body> éléments. Les spécifications HTML considèrent toutefois que les <html> obligatoire. En bref, oui, il s'agit d'un élément à part entière comme tous les autres éléments HTML.

Commenté el 17 de Mai, 2013 par Second Rikudo

3 votes

@SecondRikudo : Non, la <html> est facultative selon les spécifications (par exemple HTML4 et HTML5). Et oui, l'élément est créé de toute façon.

Commenté el 15 de Juillet, 2014 par Robert Siemer

Afficher 5 autres commentaires

Answer 3

30voto

shanethehat Points 11566

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

html { height:100%; }

Répondu el 13 de Août, 2011 par shanethehat (11566 Points )

Answer 4

28voto

Steve Tauber Points 962

Alternativement, si vous utilisez position: absolute puis height: 100% fonctionnera très bien.

Répondu el 19 de Juin, 2013 par Steve Tauber (962 Points )

9 votes

Ce serait un excellent correctif si je n'utilisais pas la flexbox pour créer ma mise en page. :/

Commenté el 21 de Avril, 2017 par Landon Call

3 votes

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

Commenté el 18 de Mai, 2018 par Echt Einfach TV

Answer 5

6voto

YellowMart Points 91

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>

Répondu el 19 de Juillet, 2012 par YellowMart (91 Points )

Answer 6

2voto

oBo Points 309

Ce n'est peut-être pas l'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>

Répondu el 18 de Avril, 2013 par oBo (309 Points )

7 votes

Ce n'est jamais une bonne idée d'utiliser le javascript quand le css seul suffit.

Commenté el 13 de Août, 2014 par Bosworth99

2 votes

Pourquoi faire une telle chose et la compliquer plus qu'elle ne devrait l'être ? Je ne comprends pas certaines réponses lol...

Commenté el 3 de Février, 2018 par Utilisateur non enregistré

Pourquoi le paramètre height : 100% ne fonctionne-t-il pas pour étendre les divs à la hauteur de l'écran ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Pourquoi le paramètre height : 100% ne fonctionne-t-il pas pour étendre les divs à la hauteur de l'écran ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: