Ho guardato qui e su vari tutorial ma non posso avere l'effetto di cui ho bisogno.
Quindi se il contenuto della pagina è inferiore a 600px, voglio che il piè di pagina sia fissato sotto un container che è quell'altezza.
Ma se il contenuto aumenta l'altezza del contenitore oltre 600px, il contenitore deve essere spostato verso il basso nella pagina.
Ho provato ad usare min-height per avvalermi, il mio aspetto html come questo
<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>
Non mi preoccupo di postare il CSS perché non si avvicina.
risposte:
1 per risposta № 1Puoi farlo con CSS Trick,
/ * Codice CSS * /
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div class="body">
</div>
</div>
<div class="footer">
Footer
</div>
</div>
Ecco il mio Fiddle File
0 per risposta № 2
So che hai provato min-height ma perché questo non è adatto?
#container
{
background:#08e;
min-height:600px;
}
#footer
{
background:#ddd;
}