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

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
source

38

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

— Snorbuckle
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
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
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
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
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
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
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
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

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