footer sempre in basso nella finestra

[silver880]

ciao ho questa struttura:

          <div id="container">

             <div id="header">
             </div>
             <div id="wrapper">
                <div id="content">
                </div>
             </div>
             <div id="footer">
             </div>
          </div>

e questo css:

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:right;width:100%;margin-right:-33%}
div#content{margin-right:33%}
div#navigation{float:left;width:32.9%}
div#extra{float:left;clear:left;width:32.9%}
div#footer{clear:both;width:100%}

vorrei che il footer fosse sempre giù in basso a prescindere dal contenuto,ora invece
se il contenuto è poco il footer mi viene visualizzato a metà schermo.Come fare ? grazie

[evan75]

o usi un position fixed oppure usi un margin bottom negativo su un elemento contenitore con altezza e altezza minima settati al 100 %
il margine negativo è uguale all'altezza del tuo footer

ciao
E75

[codencode]

Prova questo:

div#footer { 	
position: absolute; 	
bottom: 0px; 	
width: 100%; 	
clear: both;
 }

[silver880]

Originariamente inviato da codencode
Prova questo:

div#footer { 	
position: absolute; 	
bottom: 0px; 	
width: 100%; 	
clear: both;
 }

si quello l'ho già provato ma il problema è ke il contenuto è variabile,facendo in questo modo il footer rimane sempre in quella posizione anche se il contenuto "sfora" la lunghezza della finestra.
Io invece voglio che il footer si posizioni "dinamicamente" sempre in basso

[silver880]

Originariamente inviato da evan75
o usi un position fixed oppure usi un margin bottom negativo su un elemento contenitore con altezza e altezza minima settati al 100 %
il margine negativo è uguale all'altezza del tuo footer

ciao
E75

tu dici qualcosa di questo tipo?

div#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -34px;
}

div#footer {
height: 34px;
}

[codencode]

Facciamo ordine:

div#container {
	position: relative; 	
	height: 100%; 	
}

body>div#container {
	height: auto;
	min-height: 100%;
}

div#header {
	position: relative;
}

div#content {
	padding-bottom: ALTEZZA LEGGERMENTE SUPERIORE A QUELLA DEL FOOTER;
}

div#footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: ALTEZZA DEL FOOTER;
	clear: both;
}

Se ancora si accavalla il contenuto, prima della chiusura del div#wrapper inserisci

<span class="contieniFloat"></span>

e formatta la classe con

.contieniFloat { 	
	width: 100%;  	
	height: 1px; 	
	font-size: 1px; 	
	display: block; 	
	clear: both; 
}

[silver880]

Originariamente inviato da codencode
Facciamo ordine:

div#container {
	position: relative; 	
	height: 100%; 	
}

body>div#container {
	height: auto;
	min-height: 100%;
}

div#header {
	position: relative;
}

div#content {
	padding-bottom: ALTEZZA LEGGERMENTE SUPERIORE A QUELLA DEL FOOTER;
}

div#footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: ALTEZZA DEL FOOTER;
	clear: both;
}

Se ancora si accavalla il contenuto, prima della chiusura del div#wrapper inserisci

<span class="contieniFloat"></span>

e formatta la classe con

.contieniFloat { 	
	width: 100%;  	
	height: 1px; 	
	font-size: 1px; 	
	display: block; 	
	clear: both; 
}

grazie!!