Div float altezza 100%

**lapiadina** · 30-01-2013, 19:18

Ciao a tutti,
mi sto scervellando e leggendo centinaia di articoli per risolvere il "problema" dei div "float" ad altezza 100%.
vi posto il codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Test</title>
		<style type="text/css">
			/* Stili essenziali */
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			#contenitore {
				min-height: 100%;
				height: auto !important;
				height: 100%;
				margin-bottom: -30px;
				background:#FFC;
				overflow: hidden;
			}
			#header {
				height:125px; 
				width:100%; 
				background:#096;
			}
			#main {
				width: 100%;
				height: 100%;
			}
			#main-left {
				width: 180px;
				height: 100%;
				background: #9F0;
				float: left;
				position:relative;
			}
			#main-right {
				width: 180px;
				height: 100%;
				background: #F60;
				float: right;
			}
			#main-center {
				height: 100%;
				margin: 0 180px;
				background: #36C;
			}
			.clear {
				clear: both;
			}	
			.push {
				height: 30px;
			}
			#footer {
				height: 30px;
				line-height: 30px;
				background:#999;
			}
		</style>
	</head>
	<body>
		<div id="contenitore">
        	<div id="header">header</div>
            <div id="main">
                <div id="main-left">
                    

left:</
                    

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                </div>
                <div id="main-right">right</div>
                <div id="main-center">center</div>
            </div>
            <div class="clear"></div>
			<div class="push"></div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>

i due div float "#main-left", "#main-right" e anche il div "#main-center" non hanno altezza al 100%, ma è relativa al loro contenuto...
Cosa c'è che non va?

**magunet** · 31-01-2013, 23:13

L'altezza al 100% funziona solo su div in posizione assoluta e fissa purtroppo....

**lapiadina** · 01-02-2013, 10:42

Ciao magunet,
grazie per la tua precisazione, al momento ho risolto utilizzando jquery per impostare l'altezza a 100%... ma ovviamente preferivo non utilizzare js per una cosa così all'apparenza semplice.. strani questi comportamenti css..

**magunet** · 01-02-2013, 12:10

Niente figurati,

Purtroppo l'unica soluzione per ora è javascript come hai fatto tu...

Mirko

**robynosse** · 01-02-2013, 14:22

Ciao,

potresti postare la soluzione che hai utilizzato con Jquery?

Grazie,
Roberto

**lapiadina** · 01-02-2013, 15:55

Originariamente inviato da robynosse
Ciao,

potresti postare la soluzione che hai utilizzato con Jquery?

Grazie,
Roberto

Certo,
ecco qua la mia soluzione:

codice:

// resize pagina
//caricamento pagina
$(document).ready(sizeContent);
//ad ogni resize
$(window).resize(sizeContent);
function sizeContent() {
	// altezza dinamica
	var newHeight = $("html").height() - $("#header").height() - $("#footer").height() ;
	var leftMainHeight = $("#main-left").height();
	var rightMainHeight = $("#main-right").height();
	var centerMainHeight = $("#main-center").height();
	
	// trovo il valore maggiore
	arr = new Array(newHeight,leftMainHeight,rightMainHeight,centerMainHeight);
	len = arr.length // numero totale di elementi presenti nell'array
	maxHeight = arr[0];
	for (i=1;i<len;i++) {
		if (arr[i]>maxHeight) {
    		maxHeight = arr[i]
    	}
	}
	// attribuisco l'altezza maggiore ai 3 div
	$("#main-left").css("height", maxHeight + "px");
	$("#main-right").css("height", maxHeight + "px");
	$("#main-center").css("height", maxHeight + "px");
}

questo è quello che mi è venuto in mente, forse ci saranno altre soluzioni più "eleganti, ma funziona bene.
Ciao

**robynosse** · 02-02-2013, 18:25

Grazie!!!

**lapiadina** · 13-02-2013, 12:59

riapro, questo post, perchè ho riscontrato un problema nel js che ho postato.
In pratica mi si presenta un anomalia quando ad esempio passo dalla finestra del browser a max ingrandimento a riduci, se il testo/contenuto dentro al div #main-center è molto, questo mi slitta in parte oltre al footer, poi rimettendo max window invece si crea un enorme spazio vuoto tra #footer e contenuto del #main-center... ritorna tutto alla normalità solo se faccio un reload della pagina..
Ho provato a sostituire

codice:

$("html").height()

con

codice:

$(document).height()

, ma il problema rimane....

**lapiadina** · 13-02-2013, 16:06

trovato l'inghippo..

ho aggiunto all'inizio della funzione sizeContent:

codice:

$("#main-left").css("height", "auto");
$("#main-right").css("height", "auto");
$("#main-middle").css("height", "auto");

in modo che calcolasse la reale altezza e altrimenti mi associava il maxHeight definito al resize precedente..

Discussione: Div float altezza 100%

Strumenti discussione

Ricerca discussione

Visualizza

Div float altezza 100%

@lapiadina

Re: @lapiadina

Permessi di invio