使用浮動後頁腳不會停留

Question

我正在使用響應式網站。我嘗試了一切，我的頁腳不會停留下來。這是因爲我使用了float：left。我不希望它被修復，我希望它只在滾動到頁面底部時出現。這是我的代碼：

編輯：好，所以我採取了立場：絕對出來，現在它在它以前沒有的網頁上工作。但在我沒有使用float的頁面上：離開它不再工作。

footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 1.2em; 
 
    background-color: #24478f; 
 
    color: black; 
 
    text-align: center; 
 
    font-family: Calibri; 
 
    font-size: 4vw; 
 
    max-width: 100%; 
 
    clear: both; 
 
} 
 

 
#container figure { 
 
    width: 100%; 
 
    float: left; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 

 
... 
 
@media only screen and (min-device-width: 1000px) { 
 
    #container figure { 
 
    width: 33%; 
 
    display: block; 
 
    overflow: hidden; 
 
    } 
 
}

<section id="container"> 
 
    <figure> 
 
    <a href="Portfolio.html#applications"> 
 
     <img src="../imgs/74599-200.png"> 
 
    </a> 
 
    <figcaption>Multimedia Applications</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="Portfolio.html#retrieval"> 
 
     <img src="../imgs/info1600.png"> 
 
    </a> 
 
    <figcaption>Information Retrieval</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="Portfolio.html#games"> 
 
     <img src="../imgs/3281-200.png"> 
 
    </a> 
 
    <figcaption>Computer Games</figcaption> 
 
    </figure> 
 
</section> 
 

 
<footer> 
 
    <p> Infia Abelha</p> 
 
</footer>

Answer 1

取出位置：絕對和它的作品

footer { 
 
    width: 100%; 
 
    height: 1.2em; 
 
    background-color: #24478f; 
 
    color: black; 
 
    text-align: center; 
 
    font-family: Calibri; 
 
    font-size: 4vw; 
 
    clear: both; 
 
} 
 

 
#container figure { 
 
    width: 100%; 
 
    float: left; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 

 
... 
 
@media only screen and (min-device-width: 1000px) { 
 
    #container figure { 
 
    width: 33%; 
 
    display: block; 
 
    overflow: hidden; 
 
    } 
 
}

<section id="container"> 
 
    <figure> 
 
    <a href="Portfolio.html#applications"> 
 
     <img src="../imgs/74599-200.png"> 
 
    </a> 
 
    <figcaption>Multimedia Applications</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="Portfolio.html#retrieval"> 
 
     <img src="../imgs/info1600.png"> 
 
    </a> 
 
    <figcaption>Information Retrieval</figcaption> 
 
    </figure> 
 
    <figure> 
 
    <a href="Portfolio.html#games"> 
 
     <img src="../imgs/3281-200.png"> 
 
    </a> 
 
    <figcaption>Computer Games</figcaption> 
 
    </figure> 
 
    <div style="clear:both;"></div> 
 
</section> 
 

 
<footer> 
 
    <p> Infia Abelha</p> 
 
</footer>

Answer 2

爲了做到這一點，您可以使用最小高度爲您節這樣

#container{min-height:500px}  

，並設置頁腳位置相對

footer{position:relative}