web-dev-qa-db-fra.com

Pour div s'étendre sur toute la hauteur

Existe-t-il une méthode que je peux utiliser pour une div s’étendre à la hauteur maximale? J'ai aussi un pied collant dedans.

Voici la page Web: Site Web supprimé . Le bit du milieu dont je parle est le div blanc, 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%;
}

Donc 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>
cssxhtmlhtml
64
bear

Vous êtes-vous souvenu d'avoir défini la hauteur des balises html et body dans votre CSS? C’est généralement ainsi que j’ai obtenu que les DIV s’étendent à la hauteur maximale:


<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>
125
Tom

Cela pourrait être utile: http://www.webmasterworld.com/forum83/200.htm

Une citation pertinente:

La plupart des tentatives pour y parvenir ont été effectuées en attribuant la propriété et la valeur: div {height: 100%} - cela seul ne fonctionnera pas. La raison est que sans parent défini height, la div {height: 100%;} n'a rien à factoriser à 100% et sera par défaut un valeur de div {height: auto;} - auto est une "valeur requise" qui est régie par la valeur réelle content, de sorte que la div {hauteur: 100%} a = ne s'étende 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. Écrire votre corps pour inclure hauteur 100% des fournitures la valeur nécessaire.

html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}
37
Brian Clapper

si régler 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;

}
0
Dimitris Kremezis