Pour que le div s'étende sur toute la hauteur

Question

Pour que le div s'étende sur toute la hauteur

Demandé el 27 de Décembre, 2010: Quand la question a-t-elle été
280911 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Existe-t-il une méthode permettant de faire en sorte qu'une division s'étende sur toute sa hauteur ? J'ai également un sticky footer.

Voici la page web : Site web supprimé . La partie centrale dont je parle est la div blanche, midcontent, qui a des valeurs CSS :

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

Alors oui, évidemment height:100% n'a pas fonctionné. De plus, TOUS les conteneurs parents ont une hauteur définie.

Voici la structure générale

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

Demandé el 27 de Décembre, 2010 par bear

0 votes

Il s'agit d'une question TRÈS courante, votre solution se trouvera presque certainement dans d'autres réponses : stackoverflow.com/search?q=css+div+100 ou stackoverflow.com/search?q=css+div+height

Commenté el 27 de Décembre, 2010 par Steve

3 votes

Je les ai parcourus, la plupart d'entre eux disent la même chose. J'ai appliqué ce qui a été dit, mais ce n'est toujours pas réparé.

Commenté el 27 de Décembre, 2010 par bear

1 votes

Je ne suis pas sûr que votre question soit suffisamment claire. Cherchez-vous quelque chose qui fasse en sorte que "midcontainer" prenne le total restant l'espace entre "headout" et "footer" ? Parce que ce n'est certainement pas égal à 100%.

Commenté el 29 de Décembre, 2010 par cesarsalazar

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

144voto

Tom Points 5531

Avez-vous pensé à définir la hauteur des balises html et body dans votre CSS ? C'est généralement de cette manière que j'ai obtenu que les DIVs s'étendent à toute la hauteur :

<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

Répondu el 28 de Décembre, 2010 par Tom (5531 Points )

0 votes

J'ai le même problème, mais bien que j'aie réglé la hauteur du corps à 100 %, cela ne fonctionne pas. lien Si vous cliquez sur portfolio, choisissez une catégorie, puis cliquez sur une vignette, un diaporama apparaît. L'arrière-plan du diaporama ne s'étend pas à toute la page, bien que sa hauteur soit fixée à 100 %.

Commenté el 27 de Janvier, 2014 par sodiumnitrate

2 votes

Je pense que le code est correct, mais la question est erronée : elle devrait demander si vous avez défini les balises body ET html à 100%. Parce que d'une manière ou d'une autre, la balise html peut aussi affecter la sortie de différentes façons...

Commenté el 4 de Février, 2014 par Alexis Wilke

2 votes

D'une manière ou d'une autre, le html 100% semble ne capturer que l'écran visible. En utilisant chrome devtool, lorsque je sélectionne l'élément "html", il se termine à la fin de la page visible, lorsque je fais défiler la page vers le bas, c'est comme s'il ne faisait plus partie de <html>.

Commenté el 22 de Octobre, 2015 par Nathan H

Afficher 1 autres commentaires

Answer 3

40voto

Brian Clapper Points 11222

Cela pourrait vous aider : http://www.webmasterworld.com/forum83/200.htm

Une citation pertinente :

La plupart des tentatives pour y parvenir ont été réalisées en attribuant la propriété et la valeur : div{height:100%} - mais cela ne suffit pas. La raison en est que sans une hauteur définie par le parent parent, le div{height:100%;} n'a rien à prendre en compte pour le pourcentage de 100 %. valeur de div{height:auto;} - auto est une valeur "selon les besoins" qui est régie par le contenu actuel. contenu, de sorte que la div{height:100%} ne s'étendra que dans la mesure où le contenu l'exige.

La solution au problème est trouvée en attribuant une valeur de hauteur au conteneur parent, dans ce cas, l'élément body. L'écriture de votre stlye body pour inclure la hauteur 100% fournit la valeur nécessaire.
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

Répondu el 27 de Décembre, 2010 par Brian Clapper (11222 Points )

Answer 4

14voto

Frank Lämmer Points 523

Il s'agit d'une vieille question. Les CSS ont évolué. Il existe désormais le vh (hauteur de l'écran), ainsi que de nouvelles options de mise en page telles que flexbox ou CSS grid pour réaliser des designs classiques de manière plus propre.

Répondu el 19 de Septembre, 2019 par Frank Lämmer (523 Points )

Answer 5

3voto

Joehat Points 455

Au cas où le fait de fixer la hauteur du html et du corps à 100 % rendrait les choses plus difficiles pour vous, comme ce fut le cas pour moi, ce qui suit a fonctionné pour moi :

height: calc(100vh - 33rem)

Le site - 33rem est la hauteur des éléments qui suivent celui que nous voulons voir prendre toute sa hauteur, c'est-à-dire 100vh. En soustrayant la hauteur, nous nous assurons qu'il n'y a pas de débordement et que le système sera toujours réactif (en supposant que nous travaillons avec des rem au lieu de px).

Répondu el 8 de Janvier, 2020 par Joehat (455 Points )

0 votes

Assurez-vous juste que vous ne faites pas height: calc(100vh -33rem) où le signe négatif touche la valeur car ce sera un CSS invalide. De même, 33rem pourrait être remplacé par une valeur en pixels.

Commenté el 30 de Juillet, 2020 par richfinelli

Answer 6

2voto

Dimitris Kremezis Points 61

Si le réglage de la hauteur à 100 % ne fonctionne pas, essayez min-height=100 % pour div. Vous devez toujours définir la balise html.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}

Répondu el 5 de Octobre, 2018 par Dimitris Kremezis (61 Points )

Pour que le div s'étende sur toute la hauteur

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Pour que le div s'étende sur toute la hauteur

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: