150 votes

Comment étirer la hauteur d'une div pour remplir la div parente - CSS

J'ai une page avec div comme indiqué dans la présentation / capture d'écran ci-dessous :

layout

Le code est ici :

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

#B,
#C,
#D {
  position: absolute;
}

#A {
  top: 0;
  width: 100%;
  height: 35px;
  background-color: #99CC00;
}

#B {
  top: 35px;
  width: 200px;
  bottom: 35px;
  background-color: #999999;
  z-index: 100;
  border: solid 4px #00CC00;
}

#B2 {
  margin-top: -35px;
  bottom: 0;
  background-color: #FFFFFF;
  width: 200px;
  overflow: scroll;
}

#B1 {
  height: 35px;
  width: 35px;
  margin-left: 200px;
  background-color: #CC0066;
}

#C {
  top: 35px;
  left: 200px;
  right: 0;
  bottom: 35px;
  background-color: #CCCCCC;
}

#D {
  bottom: 0;
  width: 100%;
  height: 35px;
  background-color: #3399FF;
}

<div id="container">
  <div id="A">A</div>
  <div id="B">
    <div id="B1">B1</div>
    <div id="B2">B2</div>
  </div>
  <div id="C">C</div>
  <div id="D">D</div>
</div>

Je veux ajuster la hauteur de B2 div pour remplir (ou étirer jusqu'à) l'ensemble de la B div (marqué d'une bordure verte dans l'image) et ne veulent pas traverser le pied de page D div . Voici un violon qui fonctionne lien (mise à jour). Comment puis-je résoudre ce problème ?

1voto

Dmytro Yurchenko Points 119

Conteneur B2 position relative

Position supérieure B2 + de la hauteur restante

Hauteur de B2 + hauteur B1 ou hauteur restante

1voto

Chong Lip Phang Points 127

Je viens de trouver une autre solution, qui consiste à positionner tout absolument et à utiliser {top:0 ; bottom:0}.

#B {
   position:absolute;
   width: 200px;
   height: 200px;
   background-color: orange;
}
#B1 {
   position:absolute;
   top:0;
   bottom: 0;
   width: 100%;
   background-color: cyan;   
}
#B2 {
   position:absolute;
   bottom: 0;
   height: 35px;
   width: 100%;
   background: green;
}

<div id="B">
   <div id="B1">B1</div>
   <div id="B2">B2</div>
</div>

Notez qu'il y a des chevauchements.

0voto

Chong Lip Phang Points 2558

Si vous utilisez JQuery, vous pouvez le faire :

<body onload="$('nav').height($('main').height());">

0voto

Peter Quiring Points 451

J'ai toujours remarqué que c'était possible avec les tableaux, il suffit donc de changer les types d'affichage des divs en types de tableaux et cela fonctionne.

Pour contrôler la largeur : Réglez la div conteneur sur display:table (ou inline-table) et les divs intérieures sur display:table-cell comme suit :

<div style='width: 100%; height: 100%; display: table;'>
  <div style='background-color: red; width: 50%; height: 100%; display: table-cell;'>
    Left Side
  </div>
  <div style='background-color: green; height: 100%; display: table-cell;'>
    Right Side<br>
    <div style='background-color: blue; width = 100%;'>
      This is 100% of remainder!
    <div>
  </div>
</div>

Dans le cas ci-dessus, la partie gauche de la div est de 50 % et la partie droite de la div remplit le reste. Vous pouvez même placer une autre div dans la partie intérieure droite avec une largeur de 100 % et elle remplira le reste.

Pour contrôler la hauteur, il suffit d'utiliser table-row au lieu de table-cell :

<div style='width: 100%; height: 100%; display: table;'>
  <div style='background-color: red; width: 100%; height: 100%; display: table;'>
    <div style='background-color: red; width: 100%; height: 20%; display: table-row;'>
      Top Side
    </div>
    <div style='background-color: green; height: 100%; display: table-row;'>
      Bottom Side<br>
    </div>
  </div>
</div>

-1voto

L'astuce de l'espacement et de la marge ne fonctionne pas si vous avez une bordure. Vous devez utiliser une image dans le conteneur pour simuler la bordure inférieure coupée par l'astuce, mais si vous avez également des coins arrondis, c'est le bazar.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X