[css] altezza div che si adatta

**alemoppo** · 24-07-2010, 03.46.29

Salve.

Dopo la prima prova (fallita) in css, ne sto facendo un'altra.

Sono arrivato a fare questo:

Codice HTML:

<!doctype html>
<html>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>titolo</title>
<link href="./stile.css" rel="stylesheet" type="text/css" media="screen" />
<!--
			Per adesso inesistente ^^
<link rel="icon" href="immagini/favicon.png" type="image/png">

-->
</head>
<body>
<div id='mega_contenitore'>
	<div id='alto'>alto</div>
	<div id='spazio'>spazio</div>

	<div id='dx'>dx</div>
	<div id='contenuto'>centrale</div>
	<div id='sx'>sx</div>
	<div id='footer'>footer</div>
</div>
</body>
</html>

con le regole:

Codice:

body
{
	text-align:center;
}

/*MEGA contenitore*/

#mega_contenitore
{
	margin:0 auto;
	padding:0;
	margin-top:0px;
	width:1024px;
	background:#00FF00;
}

/*Supercontenitori*/
/*
#alto,#spazio,#contenuto,#dx,#sx
{
	border:medium #333333 solid;
}
*/

#alto
{
	margin-top:0px;
	height:120px;
	
	background:#0000FF;
}

#spazio
{
	margin-top:0px;
	height:10px;
	
	background:#FF0000;
}

#contenuto
{
	margin-top:0px;
	width:684px;	/*auto? 100%?*/
	float:right;
	
	background:#FFFF00;
}

#dx
{
	margin-right:0px;
	float:right;
	width:170px;
	
	background:#9933CC;
}

#sx
{
	margin-left:0px;
	float:left;
	width:170px;

	background:#FF9900;
}

#footer
{
	margin-right:0px;
}

Come si può vedere, funziona alla perfezione

...il problema sorge quando nel div centrale (#contenuto) scrivo o metto degli elementi interni.

Come faccio a far valere l'altezza dei div (#sx) e (#dx) uguale a quella di (#contenuto) ?

(poi ci sarebbe il problema del footer, ma credo che una volta sistemate le altezze di #sx e #dx, anche footer si posizionerà correttamente

Grazie,

Ciao!

**javascripter** · 24-07-2010, 10.13.48

Prova ad assegnare al #footer la proprietà clear: both.

**alemoppo** · 24-07-2010, 11.00.42

Grazie per la risposta!

Però non funziona :(

..Il problema credo non sia tanto nel footer, ma in quello di adattare le altezze di #dx e #sx rispetto al div centrale...

Grazie,

Ciao!

**javascripter** · 24-07-2010, 11.43.37

Io ho provato a fare qualcosa, ho cambiato un pò la struttura inserendo le colonne e il contenuto all'interno di un altro contenitore. Al contenitore "padre" ho assegnato un'altezza fissa e così sembra funzionare, ma è necessario definire l'altezza.

Magari qualcuno più esperto può darti una dritta ( rendedo l'altezza dinamica )

**alemoppo** · 24-07-2010, 12.27.54

Grazie 1000!...

Ciao!

**dreadnaut** · 24-07-2010, 12.34.21

Magari questo articolo ti da qualche idea alternativa: http://24ways.org/2008/absolute-columns

**karl94** · 24-07-2010, 12.49.33

Usando i posizionamenti assoluti si ha comunque qualche problema: l'altezza delle colonne assolute è fissata a quella della colonna principale. Così la colonna principale deve essere la più alta. Un'altra soluzione interessante è questa, ma c'è sempre qualche difetto. Per poter fare un layout perfetto dovremo aspettare molto, le specifiche non sono ancora pronte, e passerà ancora molto tempo prima che i vari browser inizino ad implementarle...

**dreadnaut** · 24-07-2010, 13.00.07

Se la colonna centrale è quella principale, il minimo è che abbia più contenuto delle altre. Altrimenti è probabile che qualcosa vada riposizionato, perchè è stato piazzato male - magari andava nel footer?

Al momento, l'unico metodo per avere colonne identiche con uguale priorità è dar loro display: table-cell, ma questo vuol dire tagliare fuori un tot di browser. Meno del previsto, ma comunque un tot.

**karl94** · 24-07-2010, 13.10.29

L'altra soluzione di cui ho scritto si avvicina molto a quel risultato, si basa sui margini negativi e sui padding, permette di avere un qualsiasi numero di colonne della medesima altezza, e al contrario dell'altro metodo non c'è una colonna che stabilisce l'altezza delle altre: il tutto si autoregola da sé, come nelle tabelle.

**dreadnaut** · 24-07-2010, 14.31.22

Si, ma è un hack rischioso. Primo, ho visto molte pagine diventare più di 32k pixel in altezza, basta un buon numero di commenti. Secondo, tentare di forzare dimensioni simili rischia di incappare in strani bug di difficile soluzione, che sono in giro da anni. Solo ultimamente, con sistemi basati di compositing dello schermo (metacity/compiz, windows Vista/7) il problema si sta risolvendo.

Con quel metodo rischi comunque di rendere faticosa l'esperienza per chi usa Win2k/xp, in un modo che non sai gestire (è un problema di sistema operativo più che del browser). A quel punto, conviene usare feature pulite, futuro-compatibili e gestire i browser vecchi sensatamente.

edit: fra parentesi, c.v.d. http://www.positioniseverything.net/...heightproblems

24-07-2010, 15.19.17

io solitamente includo tutti div in un altro che abbia come immagine di sfondo (in questo caso) i colori delle 3 colonne
non sono molto bravo a spiegarmi :S

**dreadnaut** · 24-07-2010, 15.31.30

E' stato un metodo saggio per tanto tempo, con il nome di Faux Columns. Ha le sue scomodità, ma funziona.

**alemoppo** · 25-07-2010, 01.16.18

Sinceramente volevo utilizzare il metodo di dreadnaut...

A parte il mio pessimo inglese, ho capito che occorre fare un div "esterno" ai 3 interni (dx, sx e contenuto); metterlo in position:relative; poi quelli interni posizionarli in modo assoluto tranne quello centrale che occorre impostarlo soltanto in larghezza (l'altezza si imposterà con il testo)...

Ecco il risultato

E' corretto almeno quello che ho capito?

Grazie,
Ciao!

25-07-2010, 05.32.14

un idea simil a quella detta da layoutorialing può essere questa:
usare due diversi contenitori "generali di cui nell'HTML il container1 conterrà il container2 con il seguente css:

Codice:

div#container1{
        background:#fff url(immagine_sfondo_sx.jpg) repeat-y top right;
}
div#container2{
        background: url(immagine_sfondo_dx.jpg) repeat-y top left;
}

la prima immagine deve chiaramente essere di una dimensione tale da non coprire l'altra...
a questo punto:
se la colonna centrale ha un colore di sfondo ed è più lunga delle altre bene, altrimenti è meglio se le immagini sono della larghezza delle colonne laterali.
per quanto riguarda il css di sx, dx, contenuto, footer e testata io metterei il seguente:

Codice:

#testata{
	width: 1024px;
	height: 40px;
	background-color: red;
}
#sx{
	width: 150px;
	float: left;
}
#dx{
	width: 200px;
	float: right;
}
#contenuto{
	margin: 0 200px auto 150px;
	background-color: white; //oppure il colore che vuoi tu o anche ometterlo, se usi immagini di larghezza giusta...
}
#footer{
	clear: both;
}

il codice HTML, per chiarezza, sarebbe questo:

Codice HTML:

<div id="container1">
<div id="container2">
	<div id="testata">
	</div>
	<div id="sx">
	</div>
	<div id="dx">
	</div>
	<div id="contenuto">
	</div>
	<div id="footer">
	</div>
</div>
</div>

poi fammi sapare se funziona...
scusate se al solito scrivo paginate... mi sa che sono un po' logorroico XD

ciao

Discussione: [css] altezza div che si adatta

LinkBack

Strumenti discussione

Display

[css] altezza div che si adatta

Regole di scrittura