div annidati che occupano tutta l'altezza e non oltre

[uffissimo]

allora inserendo questo codice:

html:

<div id="cont">
 <div id="div1">
 </div>
 <div id="div2">
 </div>
</div>

css:

#cont {
width=100%;
height=100%;
}
#div1 {
width=100%;
heigth=200px;
}
#div2 {
width=100%;
heigth=100%
}

ottengo +/- questo risultato:


ma io vorrei questo:


premetto che l'altezza di div1(200px) e del cont (100%)
non posso cambiarle, mi servono così come sono, posso cambiare qualcosa a div2???
come posso fare altrimenti?

[manurat]

Non è proprio il massimo mescolare altezze in pixel e altezze percentuali..Si potrebbe aggirare la questione così, a mio parere:

- dai a #cont posizionamento relativo.
- dai a #div2 altezza 100% e lo posizioni in modo assoluto con z-index inferiore a quello di #div1
- dai a #div1 l'altezza desiderata e lo posizioni in modo relativo con z-index superiore a quello di #div2
- fai in modo che il primo elemento contenuto in #div2 abbia un margine superiore di almeno 200px, cioè pari all'altezza di #div1, in modo che non risulti "coperto" da #div1 stesso.

[uffissimo]

eih ciao... scusa se non ti ho risp prima... effettivamente mi hai dato un'ottima soluzione mi è proprio mancato il tempo di ringraziarti, scusami...
cmq grazie ;p

[waxtorm]

quando hai tempo puoi mettere il codice? Ho provato ma non ci riesco a fare quello che hai suggerito

[uffissimo]

allora io per ciò che mi serviva avevo necessità di mettere due div all'interno di uno e far sì che non superassero il 100% di altezza, mi serviva solo per una grafica più corretta e lineare visto che so che i contenuti non superano il 100% (è davvero pochissimo materiale)

per cui prendendo spunto dalla soluzione illustrata da manurat
ho fatto così:

css:

#cont{
	height:100%;
}

#div1{
	height:200px;
	position:relative;
	top:0px;
}

#div2{
	height:100%;
	background-image: IMMAGINE;
	background-position:bottom;
	overflow:hidden;
}

e html

<div id="cont">
 <div id="div2">
  <div id="div1"></div>
  CONTENUTI
 </div>
</div>

[waxtorm]

qualcosa è sbagliato.... non capisco dove però!

[uffissimo]

io non ho riguardato il codice che ho usato... l'ho riscritto a memoria mettendo solo l'indispensabile... devi completarlo se ti serve la stessa "funzinalità"...
mi spieghi bene cosa ti serve?

[waxtorm]

Originariamente inviato da uffissimo
io non ho riguardato il codice che ho usato... l'ho riscritto a memoria mettendo solo l'indispensabile... devi completarlo se ti serve la stessa "funzinalità"...
mi spieghi bene cosa ti serve?

la stessa cosa che serviva a te

[manurat]

Prova a postare il tuo codice e vediamo cosa c'è che non va..