div fluido con bordo basso fisso

[meldro]

Ho un div contenitore fisso, di dimensioni note. Esempio 400x400 (w x h).
Al suo interno ho 2 div, uno sopra ed uno sotto, che dovrebbero dividersi l'altezza in funzione del loro contenuto.
Cioè potrebbero essere che il primo div interno sia 400x100 ed il secondo 400x300 o viceversa.
L'importante, per me, è che la loro somma in h riempa tutto il contenitore.

Come posso fare?

[Mich_]

HTML

<div id="contenitore">
  <div id="alto">

contnuto del blocco alto</p></div>
  <div id="basso">

contnuto del blocco basso</p></div>
</div>

CSS

#contenitore {
  width: 400px;
  height: 400px;
  background: red; /* sfondo che vuoi nel blocco basso */
}
#alto {
  background: blue;   /* sfondo del blocco alto */
  width: 100%;
}
#basso {
  width: 100%
}

[meldro]

Originariamente inviato da Mich_
HTML

<div id="contenitore">
  <div id="alto">

contnuto del blocco alto</p></div>
  <div id="basso">

contnuto del blocco basso</p></div>
</div>

CSS

#contenitore {
  width: 400px;
  height: 400px;
  background: red; /* sfondo che vuoi nel blocco basso */
}
#alto {
  background: blue;   /* sfondo del blocco alto */
  width: 100%;
}
#basso {
  width: 100%
}

Ok, correggo il tiro.
Tralasciando il codice di #contenitore che è ok così:
#alto {
background: blue; /* sfondo del blocco alto */
max-height: 150px;
}
E questo mi va bene così.

Ora vorrei che il #basso occupi la restante parte di #contenitore, usando l'overflow in caso il suo contenuto ecceda lo spazio lasciato da #contenitore.

Ho provato con
#basso {
height: 100%;
}
Ma in questo caso, se il contenuto di #basso non sta nello spazio rimasto di #contenitore, anche se ho l'overflow: auto non lo vedo tutto.
Un height precisa non la posso impostare, perchè se #alto è minore di 150px, poi il #basso non riempie #contenitore...

Qualche idea?

[Mich_]

L'idea te l'ho gia` data. E` la stessa che sta alla base delle "false colonne" ("faux columns").
Non devi definire l'altezza del blocco basso: deve adattarsi al contenuto, mentre lo sfondo lo definisci enl contenitore.
Se puo` sforare, ci metti l'overflow: auto (anche al blocco alto, dato che usi un max-height).

Tieni presente che queste indicazioni sono valide per i browser standard: per IE quirks mode, devi usare degli hack o i commenti condizionali.

[meldro]

Originariamente inviato da Mich_
L'idea te l'ho gia` data. E` la stessa che sta alla base delle "false colonne" ("faux columns").
Non devi definire l'altezza del blocco basso: deve adattarsi al contenuto, mentre lo sfondo lo definisci enl contenitore.
Se puo` sforare, ci metti l'overflow: auto (anche al blocco alto, dato che usi un max-height).

Tieni presente che queste indicazioni sono valide per i browser standard: per IE quirks mode, devi usare degli hack o i commenti condizionali.

Ti ringrazio per l'idea ma non funziona ne con FF ne con IE.
Se non definisco l'altezza il blocco basso si estende "sotto" il contenitore e non si attiva neanche l'overflow (del blocco basso).

[Mich_]

Hai un link per vedere?
Ho l'impressione che ci sia un altro errore (magari da qualche altra parte).

[meldro]

Originariamente inviato da Mich_
Hai un link per vedere?
Ho l'impressione che ci sia un altro errore (magari da qualche altra parte).

http://snipurl.com/231jt

Il contenuto del dib #basso con sfondo blu è molto più esteso di quello che si vede a video e come ve, nessuna scrollbar viene mostrata per consentire la visualizzazione completa.

[Mich_]

Ci sono due gravi errori.
1. Quella NON e` una pagina HTML, anche se i browser fanno del loro meglio per visualizzarla. Passa dai validatori prima di presentare obbrobri.

2. C'e` un overflow:hidden nel contenitore, e questo nasconde ovviamente l'estensione del blocco sotto.

[meldro]

Originariamente inviato da Mich_
Ci sono due gravi errori.
1. Quella NON e` una pagina HTML, anche se i browser fanno del loro meglio per visualizzarla. Passa dai validatori prima di presentare obbrobri.

Chiedo scusa, l'ho buttata li al volo per far capire il concetto.

Originariamente inviato da Mich_
2. C'e` un overflow:hidden nel contenitore, e questo nasconde ovviamente l'estensione del blocco sotto.

E questo è quello che dicevo sopra.
Mi sa che qui non ci siamo capiti.

Il contenitore ha quelle dimensioni e non voglio che vada in overflow.
Quindi #alto e #basso si devo divide lo spazio al suo interno e se necessario, sono #alto e #basso che vanno in overflow.

Comunque grazie lo stesso.

[meldro]

Originariamente inviato da Mich_
Ci sono due gravi errori.
1. Quella NON e` una pagina HTML, anche se i browser fanno del loro meglio per visualizzarla. Passa dai validatori prima di presentare obbrobri.

A questo proposito mi sono preso lo sfizio e sono andato a ricontrollarla (visto che aveva quattro caratteri contati).

Il codice scritto da me è stato perfettamente validato da http://validator.w3.org/check.
è lo spazio web di tiscali che ha aggiunto porcherie prima e dopo.