Comment étirer la hauteur de div pour remplir le div parent - CSS

107

J'ai une page avec des divs comme ci-dessous

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

avec un style comme;

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;
}
#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;
}

Je veux ajuster la hauteur de div B2pour remplir (ou étirer à) la div entière B(marquée d'une bordure verte) et ne veux pas traverser le div de pied de page D. Voici une démo de violon (mise à jour). Comment puis-je resoudre ceci??

css Alfred
la source

Réponses:

38

Ajoutez simplement height: 100%;le #B2style. min-heightne devrait pas être nécessaire.

Snorbuckle
la source
4
Ce sera le cas si le dif est vide.
x10
39
mauvaise réponse # B2 sera aussi grand que #B mais ne sera pas étiré pour remplir l'espace restant comme demandé
nid le
3
cela ne fonctionne pas pour un div avec un floatparent différent de celui-ci?
Don Cheadle
il couvre le B1 et prend tout l'espace; /
mikus
1
Cela ne fonctionne clairement pas, hauteur: 100% correspond à 100% du conteneur (je pense le plus souvent à l'ensemble de la fenêtre) - sa hauteur sera plus que souhaitée.
BT
25

Supposons que vous ayez

<body>
  <div id="root" />
</body>

Avec le CSS normal, vous pouvez faire ce qui suit. Voir une application fonctionnelle https://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

Avec flexbox, vous pouvez

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}
onmyway133
la source
10

http://jsfiddle.net/QWDxr/1/

Utilisez la propriété "min-height"
Méfiez-vous des rembourrages, des marges et des bordures :)

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;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    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;
}
x10
la source
1
non .. il remplit la page entière avec une marge supérieure. je veux juste remplir la division spécifiqueB
Alfred
Cela fonctionne correctement dans Chrome et Firefox. Si cela ne fonctionne pas pour vous, vous pouvez utiliser Faux Columns
x10
ça marche, mais ça coupe le pied de page div id= D. Je ne veux pas qu'il croise div d
Alfred
2
height:100%il manque un point-virgule pour le #B2style.
Emil
5

Ce qui convenait à mon objectif était de créer un div qui était toujours limité dans la fenêtre globale du navigateur par un montant fixe.

Ce qui a fonctionné, au moins sur Firefox, c'est

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

Dans la mesure où la fenêtre réelle n'est pas forcée de défiler, le div conserve ses limites par rapport au bord de la fenêtre pendant tout le redimensionnement.

J'espère que cela fera gagner du temps à quelqu'un.

Leo Smith
la source
5

Si vous comptez utiliser B2 à des fins de style, vous pouvez essayer ce "hack"

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

Teneff
la source
1
Cela fonctionne, merci. Au fait, ça devrait l'être margin-bottom: -9999px;. Vous manquez le moins.
Gaui
1

Position du conteneur B2 relative

Position supérieure B2 + de la hauteur restante

Hauteur B2 + hauteur B1 ou hauteur restante

Dmytro Yurchenko
la source
Mettre le nœud parent en position relative a résolu mon problème sans rapport! Merci!
Deejers
0

J'utilise height: stretch;. Ici vous trouverez des détails sur l' utilisation.

Ihor
la source
-4

Je le résoudrais avec une solution javascript (jQUery) si les tailles peuvent varier.

window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);
NKCSS
la source
8
Vous voudrez peut-être ajouter cela à votre question :)
NKCSS
48
L'absence de balise javascriptou n'est-elle pas jquerysuffisante?
kapa le
1
Ceci est également totalement inutile. CSS a parcouru un long chemin au cours des deux dernières années. Checkout flex-box et calc ().
Shawn Whinnery
1
Flexbox ne prend pas en charge <IE10 :(
Constant Meiring
@ConstantMeiring La vraie question est, est-ce que quelqu'un se soucie même de <IE10? ;)
Clonkex