Come allungare l'altezza del div per riempire il div genitore

107

Ho una pagina con div come sotto

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

con lo styling come;

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

Voglio regolare l'altezza di div B2per riempire (o allungare) l'intero div B(contrassegnato con un bordo verde) e non voglio attraversare il piè di pagina div D. Ecco una demo di violino funzionante (aggiornata). Come posso risolvere questo??

css

— Alfred
fonte

38

Aggiungilo semplicemente height: 100%;allo #B2styling. min-heightnon dovrebbe essere necessario.

— Snorbuckle
fonte

4

Lo sarà, se il dif è vuoto.

— x10

39

cattiva risposta # B2 sarà alta quanto #B ma non si allungherà per riempire lo spazio rimanente come richiesto

— annidare il

3

non funziona per un div con un diverso floatdal genitore?

— Don Cheadle

copre il

— SI1

1

Questo chiaramente non funziona, altezza: il 100% è il 100% del contenitore (penso che molto spesso l'intera finestra) - la sua altezza sarà più di quanto desiderato.

— BT

25

Supponi di averlo fatto

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

Con il normale CSS, puoi fare quanto segue. Visualizza un'app funzionante https://github.com/onmyway133/Lyrics/blob/master/index.html

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

Con flexbox puoi

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

#root {
  width: 100%
}

— onmyway133
fonte

10

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

Usa la proprietà "altezza minima"
Fai attenzione a imbottiture, margini e bordi :)

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
fonte

1

no .. riempie l'intera pagina con un margine superiore. Voglio solo riempire il div specificoB

— Alfred

Funziona correttamente in Chrome e Firefox. Se questo non funziona per te, puoi usare Faux Columns

— x10

funziona, ma sta tagliando il piè di pagina div id= D. Non voglio che attraversi il div d

— Alfred

2

height:100%manca un punto e virgola per lo #B2stile.

— Emil

5

Ciò che si adattava al mio scopo era creare un div che fosse sempre limitato all'interno della finestra complessiva del browser da un importo fisso.

Ciò che ha funzionato, almeno su Firefox, è stato questo

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

Nella misura in cui la finestra effettiva non è forzata nello scorrimento, il div conserva i suoi confini al bordo della finestra durante tutto il ridimensionamento.

Spero che questo faccia risparmiare tempo a qualcuno.

— Leo Smith
fonte

5

Se intendi utilizzare B2 per scopi di styling, puoi provare questo "hack"

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

jsFiddle

— Teneff
fonte

1

Funziona, grazie. A proposito, dovrebbe essere margin-bottom: -9999px;. Ti manca il segno meno.

— Gaui

1

Posizione contenitore B2 relativa

Posizione superiore B2 + dell'altezza rimanente

Altezza di B2 + altezza B1 o altezza rimanente

— Dmytro Yurchenko
fonte

L'impostazione del nodo genitore in posizione relativa ha risolto il mio problema non correlato! Grazie!

— Deejers

0

Io uso height: stretch;. Qui puoi trovare alcuni dettagli sull'utilizzo.

— Ihor
fonte

-4

Lo risolverei con una soluzione javascript (jQUery) se le dimensioni possono variare.

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

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

— NKCSS
fonte

8

Potresti aggiungerlo alla tua domanda :)

— NKCSS

48

Non è sufficiente l'assenza di un tag javascripto jquery?

— kapa

1

Anche questo è totalmente inutile. I CSS hanno fatto molta strada negli ultimi due anni. Checkout flex-box e calc ().

— Shawn Whinnery

1

Flexbox non supporta <IE10 :(

— Constant Meiring

@ConstantMeiring La vera domanda è: a qualcuno interessa <IE10? ;)

— Clonkex

Come allungare l'altezza del div per riempire il div genitore - CSS