Come rendere div dividere verticalmente fino in fondo?

Ho la seguente situazione, presentata nella foto. Il div grigio è il genitore delle div magenta e blu. Il div magenta si scala verticalmente con il contenuto. Mi piacerebbe avere div blu sempre in scala sul fondo del grigio contenente, div. Ho cercato e provato varie combinazioni, ma tutto a effetto nullo.Come rendere div dividere verticalmente fino in fondo?

alt text

edit: Problema risolto! Contenitore ha bisogno di un overflow: nascosto, e il div che voglio allungare verso il basso (blu) ha bisogno di padding-bottom: 1000px; margin-bottom: -1000; (o maggiore se necessario)

fonte

2009-06-30 Keyframe

Se è necessario il supporto da IE6 e versioni successive, la risposta è: non è possibile solo in css.

Ci sono diverse soluzioni per scalare davvero il div o semplicemente apparire così:

È possibile utilizzare un background-image per il div grigia (se tutto ciò che serve è lo sfondo di allungare tutta la strada verso il basso)
è possibile utilizzare javascript per calcolare l'altezza del div grigio e applicarlo al div blu

C'è un'opzione di CCS con un grande imbottitura e un altrettanto grande margine negativo, ma io non ricordo se funziona per tutti i browser e io ca non trovare l'articolo in questo momento.

Edit: Il grande imbottitura/negativo soluzione margine css:

L'articolo parla di Firefox 1.5 e Safari 2 in modo da non so se funziona ancora, ma here it is.

fonte

2009-06-30 19:10:00 jeroen

mi ricordo quella soluzione con un grande margine negativo - l'ho già usata una volta, ma per amore di Dio non riesco a ricordare i dettagli esatti di implementazione né posso trovarla online! – Keyframe

La Javascript per farlo sarebbe ...

<div id="yourDiv" style="background-color: Blue; width: 150px;"> 
    Hello 
</div> 

<script type="text/javascript"> 
    var div = document.getElementById('yourDiv'); 

    div.style.height = document.body.clientHeight + 'px'; 
</script>

Edit:

Controllare this collegamento per ottenere clientHeight in diversi browser ...

fonte

2009-06-30 19:14:03

Grazie, ma javascript non è un'opzione in questo momento. – Keyframe

Qualche ragione particolare per cui javascript non è un'opzione? Se hai jquery disponibile potresti fare qualcosa come var greydiv = $ ("# greydivselector"). Height(); $ ("# bluedivselector"). Height (greydiv); E potresti giocare con gli offset. Pensieri? – Acorn

Sono d'accordo, perché JavaScript non è un'opzione? Probabilmente una soluzione più semplice. –

All'interno della vostra div genitore, se imposti "float: right" sul tuo blu div e giochi con la tua altezza in percentuale (altezza: 100%;), penso che dovresti ottenere ciò che stai chiedendo.

Poiché il div blu è un figlio del div grigio, l'altezza massima del div blu non deve superare il div principale. A meno che non manchi qualcosa qui ...

Inoltre, se stai facendo virare il tuo div blu sulla destra, assicurati di posizionarlo prima del div magenta nel tuo markup.

Acorn

fonte

2009-06-30 19:14:49 Acorn

Non dimenticare di specificare l'altezza del genitore, altrimenti gli oggetti flottanti non "rimarranno all'interno" della colonna genitore – MrChrister

Nella mia esperienza impostare l'altezza del div blu al 100% non funziona. L'unica volta che ho voluto questo era avere il DIV blu con il suo background, per risolvere questo devi solo avere lo sfondo del DIV grigio e lo sfondo blu dell'altro DIV.

fonte

2009-06-30 19:26:00 jrglasgow

o stoux, ma sto cercando di evitarlo, poiché nella mia attuale configurazione avrei bisogno per aggiungere un altro div contenitore ... se nient'altro si presenta, lo farò. Grazie. – Keyframe

Un altro modo per impostare l'altezza del 100% negli oggetti HTML è stili di utilizzo:

<html> 
<head> 
<style> 
    html, body { 
    height: 100%; 
} 

#mydiv { 
    height: 100%; 
    background-color:red; 
}   
</style> 
</head> 
<body> 
<div id="mydiv">aaa</div> 
</body> 
</html>

fonte

2009-06-30 19:41:16 pedrofernandes

Per gli oggetti figlio che funzionano con altezza 100%, il genitore deve avere un'altezza di correzione – MrChrister

no se si dichiara html e body tag in altezza: 100% – pedrofernandes

inserire html nel mio post nel browser e vedere la magia :) – pedrofernandes

La chiave è di avere un'altezza impostato sul contenitore principale. Poi l'altezza: 100% lavora

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Divs</title> 
<style type="text/css" media="all"> 
#main { 
    height:30em; 
    width:30em; 
    background-color:#999999; 
    padding:1em 1em 0px 1em; 
} 
.inner { 
    width:5em; 
} 
#blue { 
    float:right; 
    background-color:#0000FF; 
    height:100%; 
} 
#magenta { 
    float:left; 
    background-color:magenta; 
} 
</style> 
</head> 
<body> 
<div id="main"> 
    <div class="inner" id="blue"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10 
    </div> 
    <div class="inner" id="magenta"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6 
    </div> 
</div> 
</body> 
</html>

fonte

2009-06-30 19:45:21 MrChrister

sì, ma cosa succede se non conosco l'altezza del genitore in attacco? Voglio che si ridimensiona con il contenuto div di sinistra ... Mi chiedo perché anche un min-height non dovrebbe funzionare in questa situazione, deve essere una sorta di svista. – Keyframe

Ah sì, il pescato. – MrChrister

ho ottenuto questo al lavoro (in Chrome comunque) impostando div del genitore:

position: absolute;

e div del bambino:

height: 100%;

fonte

2012-12-02 18:24:06 jLi

Come rendere div dividere verticalmente fino in fondo?

risposta

Problemi correlati