Div posizionato a fine finestra in modo fisso

**marcopaolo79** · 17-07-2013, 17:18

Salve a tutti la mia richiesta è molto semplice.....
ho bisogno di posizionare un DIV che chiamo footer a fine finestra, ma vorrei che il contenuto della pagina, se più alto della finestra non "spingesse" il DIV footer ma in ci passasse sotto.
In pratica la mia grafica dovrebbe essere composta da un div che rimane fisso a fine pagina sempre visibile e uno contenuto che scrolla verso il basso passando sotto a questo div footer.
Siccome è una grafica per un sito mobile il contenuto al 90% sarà sempre più alto della finestra.
Per posizionare il div a fine finestra ho fatto così:

codice:

html, body {
    height: 100%;
}

body {
	font-family:Garamond, serif;
	color:#666;
	font-size: small;
	margin:0;
	padding:0;
	background:#FFF;
}

#container {
    min-height: 100%;
    height: auto;
    height: 100%;
    margin: 0 auto -50px;
}

#container #top{
	width:100%;
	height:50px;
	padding:0;
	margin:0;
	background-color:#000000;
}

#footer {
    height: 50px;
    clear: both;
    background-color:#000000;
}

e funziona perchè il div footer mi sta posizionato sempre a fine finestra, poi ho creato il div per le notizie

codice:

#container .notizia {
	width:100%;
	float:left;
	padding:0;
}

ma con questo codice se il div notizia (e di conseguenza container) è più alto della finestra spinge il footer in basso mentre io vorrei tenerlo fermo a fine finestra e il div notizia che gli scorre sotto...

ho provato a dare un z-index di 500 al container e di 700 al footer ma non ho risolto.....

come posso fare?
grazie a tutti per l'aiuto

**webbeloz** · 17-07-2013, 18:02

se notizia deve stare a sè, metti notizia in suo div, e non come classe... e poi piazzalo con position fixed
left o right e bottom per es: 20px;

vediamo il tuo HTML com'è...

**marcopaolo79** · 18-07-2013, 10:10

ciao in pratica questo sarebbe il mio html:

codice:

<body>

<div id="container">

	<div id="top">...top sito...</div>

	<div class="notizia">
		<h3>titolo</h3>
		<p class="testo">
			...testo testo testo testo...
		</p>
	</div>
</div>

<div id="footer">...footer...</div>

</body>

Discussione: Div posizionato a fine finestra in modo fisso

Strumenti discussione

Ricerca discussione

Visualizza

Div posizionato a fine finestra in modo fisso

Permessi di invio