- Home
- Categorie
- Coding e Sistemistica
- Coding
- Div 100% footer bottom
-
Div 100% footer bottom
salve,
ho un problema
dovrei tenere il mio footer sempre in basso e i relativi contenuti al 100% di altezza
ho una struttura di qst tipo:
<div id="wrapper">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
<div id="footer"></div>
</div>ripeto! footer sempre in basso, ma anche che la left nel caso content sia piu alto, si allungi in automatico... possibile?
-
il css come lo hai impostato ?
-
html,body{margin:0; padding: 0;height: 100%}
body>div#wrapper{height: auto; min-height: 100%}
div#wrapper {width:852px; margin:0 auto; position: relative;}
div#left, div#content{position: relative; float:left;}
div#right{position: relative; float:right;}
div#footer {width:852px; margin:0 auto; bottom:0; position:relative;}
-
-
nulla si adatta al 100% del video e non del reale contenuto di #content
-
Puoi postare il link del sito ?, almeno troviamo prima la soluzione
-
w w w .i10anniavanti.com
al momento ho risolto impostando un bg al #wrapper, cosi nn si nota se #colonnasx #container e #colonnadx non si allungano!
avete un rimedio piu valido?!
-
Prova a dare una breve lettura a questa guida, che rispecchia la tua situazione, in quanto usi immagini di background ...
Dal link della guida puoi tornare in dietro per vedere le varianti, ma per quello che ho visto, a te dovrebbe servire questa.
In tutte le varianti si fa riferimento anche al problema del footer
PS: complimenti, sta venendo un bel sito
-
grazie
-
Ciao 10anniavanti
Seguendo l'idea di GloboGSM devi, oltre a dare l'attributo absolute, anche attribuire ad un genitore il valore di "position:relative;" in modo che l'oggetto "figlio" (in questo caso footer) possa avere un riferimento sul proprio orientamento grazie ai parametri top-left-right-bottom.
Puoi darlo anche al body o a qualsiasi cosa ruoti tra tag, id e class.
Se ad esempio il footer ha un'altezza fissa di (es.) 200px allora potresti attribuirgli questi valori:
#footer{
height:200px;
width:100%
position:absolute;
bottom:-200px;
}Dovrebbe funzionare ma non ne sono sicuro poichè non ho la "strumentazione" necessaria
Comunque l'idea è quella ciao!