設置頁腳在底部

這是一個測試代碼的頁面，但我需要設置頁腳頁面設置頁腳在底部

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
     <div class="wrapper"> 
       <?php 
        for($i=0;$i<100;$i++){ 
         echo $i."<br>"; 
        } 
       ?> 
     </div> 
     <footer> 
      Footer<br> 
     </footer> 
    </body> 
<html>

真正的底部和css文件

html, body { 
    height: 100%; 
    background-color: grey; 
} 
.wrapper { 
    min-height: 100%; 
    margin-bottom: -20%; 
    padding-bottom: -20%; 
    background-color: green; 
} 
footer { 
    background-color: blue; 
    min-height: 20%; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

這樣設置頁面底部的頁腳，但如果您繼續滾動頁面，則需要將頁腳設置爲實際結尾，而當您無法再滾動頁面時，必須放置頁腳。

來源

2015-12-30 AFS

就像這個...這個設置它的所有內容後，這是我想你的意思

footer { 
    background-color: blue; 
    min-height: 20%; 
    position: relative; 
    width: 100%; 
}

Have a look at this fiddle

來源

2015-12-30 19:10:13

嘗試分配到頁腳元素：

footer{ 
position: fixed; 
bottom: 0; 
}

來源

2015-12-30 19:07:17 Dimentica

你應該刪除正文的邊距和填充，有一個默認邊距和填充，可以將其刪除。

jsfiddle-link

html, body { 
    height: 100%; 
    background-color: grey; 
    padding:0; 
    margin:0; 
}

來源

2015-12-30 19:10:55

設置頁腳在底部

回答

相關問題