web-dev-qa-db-fra.com

Comment faire en sorte qu'une div remplisse son élément parent verticalement?

J'essaie d'obtenir que #sidebar remplisse #main verticalement (et qu'il corresponde à la hauteur de #content). Comment puis-je faire cela?

Voici mon jsFiddle .

CSS:

#main {
   border: solid green 2px;
}

#sidebar {
    background-color: red;
    width: 20%;
    overflow: auto;
    float: left;
    height: 100%;
}

#content {
    background-color: orange;
    width: 80%;
    overflow: auto;
    float: left;
    height: 100%;
}

#main-footer {
    clear: both;
}​

Et html:

<div id="main">

 <div id="sidebar">
     <ul>
         <li>abc</li>
         <li>def</li>
     </ul>
 </div>

 <div id="content">
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
 </div>

 <div id="main-footer">
 </div>

</div>​
csslayouthtml
12
Matt Fenwick

Sans régler explicitement la hauteur de la div, c'est un peu compliqué. Voici une solution .

11
septemberbrain

div est un conteneur. Il prendra la hauteur de son contenu. La seule façon d'obtenir ce que vous voulez est d'utiliser la hauteur en px. Si vous ne vous souciez pas du marquage sémantique (je vous recommande de le faire), le lien de septembreBrain est un bon truc.

3
Ashwin Singh

Solution 2017: Pour moi, cela a bien fonctionné avec flexbox. J'avais besoin que le contenu de la page soit étiré sur toute la hauteur de la fenêtre si le contenu devait être plus petit que la hauteur de la fenêtre.

      html,
      body{
        min-height: 100%;
        display: box;
        display: flexbox;
        display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
        display: -ms-flexbox;  /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10*/
        display: -moz-box;
        display: flex;
        -webkit-box-orient:vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-box-direction:normal;
        -webkit-flex-direction:column;
        -ms-flexbox-direction:column;
        -ms-flex-direction: column;
        flex-direction:column;
      }
      body{
        -webkit-box-flex: 1;
        -webkit-flex: 1 1;
        -ms-flex: 1 1;
        flex: 1 1;
      }
      #page{
        -webkit-box-flex: 100;
        -webkit-flex: 100 100;
        -ms-flex: 100 100;
        flex: 100 100;
      }
      footer{
        -webkit-box-flex: 1;
        -webkit-flex: 1 1;
        -ms-flex: 1 1;
        flex: 1 1;

        -ms-flex-preferred-size: 300px;
        -webkit-flex-basis: 300px;
        flex-basis: 300px;
      }
      @media only screen  and (max-width:500px) {
        footer{
           -ms-flex-preferred-size: 400px;
           -webkit-flex-basis: 400px;
           flex-basis: 400px;
        }
      }
3
Tech Nomad

Supprimer les hauteurs de #sidebar et #content et ajouter display:flex à #main devrait suffire.

c'est à dire.

#main {
  border: solid green 2px;
  display: flex;
}

#sidebar {
  background-color: red;
  width: 20%;
  float: left;
}

#content {
  background-color: orange;
  width: 80%;
  float: left;
}

Voir JSFiddle.

0
jamsandwich