[CSS] div centrato e di altezza 100%

[var]

come da oggetto.
come ottengo il risultato, con i CSS?

ah, la larghezza è fissa.

grazie! ;)

[Dennis]

<div style="width:100%;text-align:center">
<div style="width:500px;height:100%> TUO DIV </div>
</div>


nn mi viene in mente altro...

[Jerry Masslo]

<style type="text/css">
* {margin:0;padding:0}
html, body {height:100%}
body {background:gray;
text-align:center;
overflow:auto;
}


div {background:silver;
width:80%;
min-height:100%;
height:auto!important;
height:100%;
margin:auto;
}

</style>


ti ho messo il min-height perché non mi fido che non tracimi :maLOL: scusa la faccina ma è troppo tempo che non mi riusciva di usarla

[var]

Originariamente inviato da Jerry Masslo
<style type="text/css">
* {margin:0;padding:0}
html, body {height:100%}
body {background:gray;
text-align:center;
overflow:auto;
}


div {background:silver;
width:80%;
min-height:100%;
height:auto!important;
height:100%;
margin:auto;
}

</style>

grazie illustrissimo, ma mi dici che cappero vuol dire la roba in neretto?

grazie anche al buon Dennis, ovviamente. ;)

[Jerry Masslo]

Originariamente inviato da var
grazie illustrissimo, ma mi dici che cappero vuol dire la roba in neretto?

grazie anche al buon Dennis, ovviamente.

illustrissimo? VVoVe:

è un discorso lungo, avrei fatto prima a non usare il min-height e a dare al div un overflow:auto

ie non legge il min-height, non se lo fila per niente, gli altri browser sì (mozilla, opera) ie però legge l'height come min-height, cioè se il contenuto supera i limiti lui allunga il contenitore, nell'ordine


min-height:100% /* i browser seri danno quell'altezza e la considerano come minima, cioè se il contenuto non ci sta l'allungano*/

height:auto!important /*siccome nella prossima riga c'è l'height per ie se i browser seri non hanno questa bruciano il min-height e non l'allungano più, l'important serve a dire ai browser seri quale riga considerare in caso che più d'una imposti la stessa proprietà, cioè la successiva non la sovrascriverà, invece ie non legge l'important e la sovrascriverà con */

height:100% /* e siccome ie legge l'height come fosse min-height allora tutti i browser sono accontentati*/


in pratica con !important hai uno sniffer in css che puoi usare per fornire codice differente ai vari browser in caso si renda necessario

[var]

ecco, hai confermato di essere illustrissimo.

[Xinod]

salve
mi accodo a questa discussione per cercare di chiarire un problema che trovo abbastanza fastidioso:
centrando un box se la finestra è + stretta del contenuto questo (con mozilla)
scivola a margini negativi e la scrollbar orizzontale non permette di scorrere tutto il contenuto

da alcune prove mi sembra di aver capito che si risolve specificando un bordo (come minimo sul lato sinistro)
ma ho un' immagine come sfondo x il body e non voglio alcun bordo visibile

- se lo setto a width:0px o none il problema con moz resta
- se lo setto a color:transparent IE me lo mostra cmq (del colore definito per il testo)

si può risolvere?

[Jerry Masslo]

però il tuo problema compare mi pare quando usi margini negativi, cioè la roba che si usa normalmente per centrare verticalmente, colla centratura orizzontale invece basta sfruttrare il margin:auto, in questo caso mozilla non ha nulla da ridire, cioè se nel codice che ho postato dai al width un valore in pixel, tutto il div rimane accessibile con mozilla (almeno l'ho provato con firefox)

in ogni caso posta un po' di codice così fai risparmiare un po' di lavoro, sai è agosto.

[pacovox]

Attenzione che dipende da quale versione di Firefox si stà usando.
Centrando un box sia con margin:auto che in posizione assoluta e margini negativi se la finestra è più stretta del contenuto con alcune versioni di Firefox si hanno gravi problemi, il contenuto più a sinistra non è più accessibile.
Credo sia un bug delle versioni vecchie di firefox, magari lo stesso problema si ripresenta in Mozilla.

[Xinod]

sì, il problema è presente (in maniera identica in moz1.5 e ffox0.8) anche con la tecnica del margin:auto
anche con l' esempio di Jerry poco + sopra, con larghezza settata in px (tra l' altro genera sempre con i suddetti browser altre reazioni inattese al ridimensionamento minimo)

ho risolto dando un padding di 1px al box, molto meno invasivo di un bordo che non mi serve

es. all' osso, se non decommento una delle 2 righe il box scivola a sinistra

<html>
<head>
<title></title>
<style type="text/css"> 
body, html {
	margin:0;
	padding:0;
	text-align:center;
}
#box {
	text-align:left;
	width:500px;
	margin:auto;
	background-color:#f90;
/*	border:1px solid #f00; */
/*	padding:1px; */
}
</style>
</head>
<body>
<div id="box">
contenuto
</div>
</body>
</html>