2

フッターをページの下部に貼り付けようとしています。スティッキーフッターに関するさまざまなチュートリアル（ほとんどが非常に似ています）をたどってきましたが、どれもうまくいきませんでした。何らかの理由で、フッターが PAGE ではなく SCREEN の下部に貼り付けられます...

これは、私の HTML の div のレイアウトです。

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

これは私のCSSです：

html, body {
height: 100%;

#wrapper {
min-height: 100%;
position: relative;
}

#content {
position: absolute;
padding-bottom: 300px; (same as footer height)
}

#footer {
width: 100%;
height: 300px;
position: absolute;
bottom: 0px;
}
4

2 に答える 2

3

これを試して

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper{
    min-height:100%;
    position:relative;
}
#header {
   background:#00ff0f;
   padding:30px;
}
#main{
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify;
    height:100%; 
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:15px; /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="main">
        Some Content Here... 
    </div>
    <div id="footer">Footer</div>
</div>​

デモ。

于 2012-09-11T00:20:00.187 に答える