web-dev-qa-db-fra.com

Remplir l'espace vertical restant - uniquement CSS

Je dois remplir le espace vertical restant de #wrapper sous #first avec #second div.

J'ai besoin d'une seule solution CSS.

#wrapper {
  width: 300px;
  height: 100%;
}

#first {
  width: 300px;
  height: 200px;
  background-color: #F5DEB3;
}

#second {
  width: 300px;
  height: 100%;
  background-color: #9ACD32;
}
<div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
</div>
htmlcsshtml5css3
53
Abdul Jabbar Dumrai

Vous pouvez le faire avec position:absolute; sur le #second div comme ceci:

VIOLON

CSS:

#wrapper{
    position:relative;
}

#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

EDIT: Solution alternative

En fonction de votre mise en page et du contenu de ces divs, vous pouvez le rendre beaucoup plus simple et avec moins de balisage comme ceci:

VIOLON

HTML:

<div id="wrapper">
    <div id="first"></div>
</div>

CSS:

#wrapper {
    height:100%;
    width:300px;
    background-color:#9ACD32;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}
21
web-tiki

Vous pouvez utiliser CSS Flexbox à la place d'une autre valeur d'affichage, le module Flexbox Layout (Boîte flexible)) vise à fournir un moyen plus efficace de disposer, aligner et distribuer espace entre les éléments d'un conteneur, même lorsque leur taille est inconnue et/ou dynamique.

Exemple 

/* CONTAINER */
#wrapper
{
   width:300px;
   height:300px;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* SOME ITEM CHILD ELEMENTS */
#first
{
   width:300px;
    height: 200px;
   background-color:#F5DEB3;

}

#second
{
   width:300px;
   background-color: #9ACD32;
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
}

Exemple jsfiddle

Si vous voulez avoir un support complet pour les anciens navigateurs comme IE9 ou inférieur, vous devrez utiliser un polyfill comme flexy , ce polyfill permet de supporter le modèle Flexbox mais uniquement pour 2012 spec du modèle flexbox.

Récemment, j'ai trouvé un autre polyfill pour vous aider avec Internet Explorer 8 et 9 ou tout autre navigateur plus ancien qui ne supporte pas le modèle flexbox, je ne l'ai toujours pas essayé mais je laisse le lien ici

Vous pouvez trouver un outil utile et guide complet de Flexbox de Chris Coyer ici

43
xzegga

Solution Flexbox

Remarque: Ajoutez des préfixes de fournisseur flex si requis par votre navigateurs pris en charge .

html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}
<div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div>
24
Reggie Pinkham

Si vous pouvez ajouter quelques divs supplémentaires pour que votre code html ressemble à ceci:

<div id="wrapper">
    <div id="first" class="row">
        <div class="cell"></div>
    </div>
    <div id="second" class="row">
        <div class="cell"></div>
    </div>
</div>

Vous pouvez utiliser le display:table Propriétés:

#wrapper
{
   width:300px;
   height:100%;
   display:table;
}

.row 
{
   display:table-row;
}

.cell 
{
   display:table-cell;
}

#first .cell
{
   height:200px;
   background-color:#F5DEB3;
}

#second .cell
{
   background-color:#9ACD32;
}

Exemple

12
Pete

Avez-vous essayé de changer la hauteur du wrapper en vh au lieu de%?

#wrapper {
width:300px;
height:100vh;
}

Cela a fonctionné très bien pour moi lorsque je voulais remplir ma page avec un fond dégradé, par exemple ...

2
Stian Eggum Tellnes

Si vous ne voulez pas avoir de hauteur fixe pour votre conteneur principal (haut, bas, ....), vous pouvez simplement utiliser ceci fichier css pour obtenir un conteneur flex qui utilise le espace restant incl. travail!!! barres de défilement

Fiddler

<!DOCTYPE html>
<html >
<head>
    <title>Flex Container</title>
    <link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/Indigo-5.0.css">

  <style>
    .cont{
        background-color: blue;
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .headerContainer {
        background-color: green;
        height: 100px;
        width: 100%;
    }

    .mainContainer {
        background-color: white;
        width: 100%;
        overflow: scroll
    }

    .footerContainer {
        background-color: gray;
        height: 100px;
        width: 100%;
    }
  </style>


  </head>

<body class="qx-flex-ready" style="height: 100%">
  <div class="qx-vbox cont">
    <div class="headerContainer">Cell 1: flex1</div>
    <div class="mainContainer qx-flex3">
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>

    </div>
    <div class="footerContainer" >Cell 3: flex1</div>
  </div>
</body>
</html>
0
Tobias Koller

Tout ce dont vous avez besoin est un peu de balisage amélioré. Enveloppez le second dans le premier et il sera rendu sous.

<div id="wrapper">
    <div id="first">
        Here comes the first content
        <div id="second">I will render below the first content</div>
    </div>
</div>

démo

0
JimmyRare