[css] forzare l'altezza di un box.

**hotel_vv** · 05-12-2003, 19:10

o cosi' se c'e' poco testo!?

**Jerry Masslo** · 05-12-2003, 20:55

vado di fretta, scusa, ma se non ho capito male si tratta di questo?

**deleted_id_48586** · 06-12-2003, 14:59

Allora vediamo se non ho capito male, tu hai un div #corpo (per esempio) in cui hai un div #contenuto nel quale inserisci testo immagini ecc che ti interessano e a seconda del contenuto di quest'ultimo vuoi che vari di conseguenza la dimensione "height" del dvi #corpo giusto ?
Beh se è questo che non capisci preparati

...

quello che vuoi fare non si può.
i due div rimangono indipendenti, non c'è modo di emulare da questo punto di vista un layout tabellare.

**Jerry Masslo** · 06-12-2003, 15:18

Originariamente inviato da Sgurbat
Allora vediamo se non ho capito male, tu hai un div #corpo (per esempio) in cui hai un div #contenuto nel quale inserisci testo immagini ecc che ti interessano e a seconda del contenuto di quest'ultimo vuoi che vari di conseguenza la dimensione "height" del dvi #corpo giusto ?
Beh se è questo che non capisci preparati

...
quello che vuoi fare non si può.
...
i due div rimangono indipendenti, non c'è modo di emulare da questo punto di vista un layout tabellare.

Forse non hai capito male però ti sei spiegato peggio, quello che dici non si possa fare si può fare, il div contenitore si può fare allungare col div contenuto, vedi il link di prima, tu invece penso ti riferisca a un'altra situazione, un div contenitore di due altri div contenuto1 e contenuto2 e si vuole fare allungare in dipendenza del contenuto più lungo entrambi alla stessa altezza, in questo caso i div sono indipendenti e non si possono fare allungare allo stesso modo, però non è detto che usando qualche stratagemma non si possa ovviare, penso a usare un quarto div contenuto nel primo contenitore e siccome è difficile da spiegare prima ci provo e poi se ne esce fuori qualcosa la posto, sempre che non sia stato io a capire male, immagino però che bisognerebbe sapere prima il div con contenuto più corto in caso di div indipendenti con contenuti più corti a seconda dei casi uno o l'altro, la faccenda si complicherebbe troppo.

**deleted_id_48586** · 06-12-2003, 15:29

più o meno si credo di essermi spiegato male, guarda questo codice e vedrai che il #corpo si allunga in base al #contenuto.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#corpo {
width: 600px;
min-height: 200px;
height: auto !important;
height: 200px;
background-color: #999999;
text-align: center;
}

#contenuto {
width: 400px;
background-color: #FFFFEE;
margin: auto;
text-align: left;
}

</style>

</head>

<body>

<div id="corpo">

<div id="contenuto">

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

</div>

</div>

</body>
</html>

nel caso in cui invece voglia regolare meglio la posizione di #contenuto all'interno di #corpo questo è il risultato:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#corpo {
width: 600px;
min-height: 200px;
height: auto !important;
height: 200px;
background-color: #999999;
text-align: center;
}

#contenuto {
position: relative;
top: 100px;
left: 50px;
width: 400px;
background-color: #FFFFEE;
margin: auto;
text-align: left;
}

</style>

</head>

<body>

<div id="corpo">

<div id="contenuto">

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto lorem ipsum facto
</p>

</div>

</div>

</body>
</html>

spero di essere stato spieagato.

**Jerry Masslo** · 06-12-2003, 18:33

Sgurbat, anche tu ti becchi la tua paginetta

**deleted_id_48586** · 06-12-2003, 22:00

No guarda con tutto il rispetto ne la voglia di fare polemica io non mi becco nessuna paginetta (anche se cè sempre da imparare), quello che non volete capire è che non si può (per ora) utilizzare i CSS per ricreare alcuni layout classici nell'uso delle tabelle.

es:
<table>
<tr>
<td bgcolor="red">menù</td>
<td bgcolor="blue">contenuto</td>
</table>

in cui le due parti sono, seppur visivamente distinte, legate indissolubilmente nel codice di formattazzione.

Nell'ultimo esempio che tu mi hai postato se io vado a ridimensionare notevolmente il contenuto di "testo" nel div grigio chiaro mi comprare inevitabilmete alla vista il div sottostante verde.

in una struttura visuale identica ma realizzata con un table-layout il div chiaro non verrebbe ridimensionato fino a quel punto ma assumerebbe la "height" del div verde.

Spero finalmente di essere stato chiaro.

N.B.
Sono assolutamente a favore di layout tableless.

**Marcolino's** · 07-12-2003, 02:42

No, direi che sei ancora abbastanza scuro altro che chiaro, e siccome l'argomenti mi interessa, ti secca chiarirti per cortesia?

tu hai detto:

Nell'ultimo esempio che tu mi hai postato se io vado a ridimensionare notevolmente il contenuto di "testo" nel div grigio chiaro mi comprare inevitabilmete alla vista il div sottostante verde.

Vorresti dire semplicemente che aggiungendo testo allunghi notevolmente il box andando ad allungare anche quello verde, come dire, quello grigio si tira dietro quello verde.
No il fatto è che guardo l'esempio postato da Jarry e non capisco.

Su constile c'è un esempio abbastanza banale che risolve il problema, nel layout "liquido" viene usato un contenitore che a sua volta ne contiene altri tre, in effetti il colore viene dato allo sfondo mentre i box laterali non hanno un colore di sfondo creando l'illusione di essere svincolati dal terzo box posto al centro il quale ha un suo colore di sfondo ed un'altezza minima uguale a quella del contenitore.
L'effetto è quello di vedere un layout non dissimile nel contesto a quello delle pagine classiche di html.it, ovvero un layout a T con menù laterali.
Se aggiungi testo nel box centrale, questo si "tira dietro" anche il box contenitore allungandolo e dando l'impressione che siano le barre laterali ad allungarsi insieme al testo.
Se vai a vedere BLOGGER che ho creato partendo da quel layout capisci cosa sto dicendo.

Se invece ti interessava lasciare tali barre di lunghezza prefissata, bastava allora dargli un colore di sfondo e si vedevano tre box, due laterali di una certa lunghezza ed uno centrale svincolato.

**Jerry Masslo** · 07-12-2003, 04:16

Sgurbat guarda che il "ti becchi" era scherzoso forse ho risparmiato sulle faccine? :master: Si riferiva al fatto che la tua paginetta è derivata da un'altra per antos che è il link postato un po' prima, ti devo da chiedere scusa perché c'erano margini per fraintendere? scusa A posto?

Veniamo ai div, non escludo che ridimensionando salti fuori qualche magagna ma coi browser che ho io non la vedo, tu che browser stai usando? Opera fa lo zoom e quindi il problema non esiste, in Mozilla non funziona e quindi il problema non si pone e i vari iexploder (l'ho provato sul 4 5 5.5 e 6) ridimensionano molto poco e non succede niente. Poi se leggi bene non volevo dimostrare niente, semmai chiedevo se qualcuno conosceva una soluzione anche per mozilla per quel particolare tipo di layout che tiene un div di sfondo distino dai due o tre se se ne vogliono tre. Perché se non si vuole un div di sfondo distinto passa anche mozilla, basta aggiustare nel primo link (la pagina beccata da Antos, intesa come dedicata a

) le dimensioni del div di sfondo. Tutto sempre colla limitazione di avere sempre lo stesso div più lungo degli altri perché altrimenti tutto sballa, anche nell'esempio portato da Marcolino's di Constile se si aggiunge molto testo a uno dei div laterali tutto sballa. A meno di non usare qualche altro trucco, buono per i layout fissi e non liquidi (io preferisco i fissi

) Però tu le paginette non te le vuoi beccare :quote:

Ah, nessuna polemica su tabelle non tabelle, qualcuno si sogna di riprodurre senza tabelle tutto quello che si può fare con le tabelle? Un incubo.

**blakwolf** · 07-12-2003, 12:01

Originariamente inviato da WebCreators
Ah già, non ci avevo fatto caso.. allora devo chiederti che doctype stai usando.. nell'html4 l'uso della percentuale in height non è proprio accettato.. per riparare metti questo nel codice nei css

codice:

html, body {height: 100%;}

intervengo solo per una puntualizzazione

il fatto di definire un altezza per HTML provoca su alcuni browser mac il crash dello stesso browser

Discussione: [css] forzare l'altezza di un box.

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio