CSS：如何將頁腳附加到頁面的底部

我想將頁腳附加到頁面的底部。爲了做到這一點，我使用了其他類似主題中推薦的絕對位置。但是由於未知原因，頁腳的行爲就好像它是固定的，而不是絕對的。CSS：如何將頁腳附加到頁面的底部

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    font-family: "Times New Roman", Times, serif; 
 
    font-size: 20px; 
 
} 
 

 
header { 
 
    background: rgba(150, 150, 150, 0.5); 
 
    border-bottom: solid 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
main { 
 
    padding-top: 5px; 
 
    padding-left: 100px; 
 
    padding-right: 100px; 
 
    padding-bottom: 60px; 
 
} 
 

 
footer { 
 
    border-top: solid 1px; 
 
    background: rgba(150, 150, 150, 0.5); 
 
    width: 100%; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Index</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    This is header 
 
    </header> 
 

 
    <main> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    </main> 
 

 
    <footer> 
 
    This is footer 
 
    </footer> 
 
</body> 
 

 
</html>

畫面1：屏幕2：

頁腳應該堅持與頁面的下邊緣，而是仍然堅持使用瀏覽器的下邊緣。怎麼了？

來源

2017-05-30 sva605

爲什麼不直接使用'位置：relative'？ – Tom

http://plnkr.co/edit/o5aTdu4iLGSVIWxi3sUu看看這個。只需刪除3條CSS規則，並讓頁腳自然移動到頁面底部 – Bramastic

@ thebluefox，因爲如果內容不填充屏幕，那麼頁腳不會位於視口的底部，我認爲OP是想要一個粘性頁腳，它將位於內容底部或屏幕底部，以較大者爲準 – Pete

您已將身高設置爲100％，因此您的身體只會與視口一樣高。嘗試使用min-height對身體（也相對位置添加到體）：

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
    width: 100%; 
 
    font-family: "Times New Roman", Times, serif; 
 
    font-size: 20px; 
 
} 
 

 
header { 
 
    background: rgba(150, 150, 150, 0.5); 
 
    border-bottom: solid 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
main { 
 
    padding-top: 5px; 
 
    padding-left: 100px; 
 
    padding-right: 100px; 
 
    padding-bottom: 60px; 
 
} 
 

 
footer { 
 
    border-top: solid 1px; 
 
    background: rgba(150, 150, 150, 0.5); 
 
    width: 100%; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Index</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    This is header 
 
    </header> 
 

 
    <main> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    </main> 
 

 
    <footer> 
 
    This is footer 
 
    </footer> 
 
</body> 
 

 
</html>

來源

2017-05-30 09:20:29 Pete

無需指定位置的頁腳，也卸下底部和左側。您需要指定每個部分的高度（以％表示）。試試下面的CSS，

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
width: 100%; 
font-family: "Times New Roman", Times, serif; 
font-size: 20px; 
} 

header { 
height:10%; 
background: rgba(150,150,150,0.5); 
border-bottom: solid 1px; 
width: 100%; 
text-align: center; 
padding-top: 20px; 
padding-bottom: 20px; 
} 

main { 
height:80%; 
padding-top: 5px; 
padding-left: 100px; 
padding-right: 100px; 
padding-bottom: 60px; 
} 

footer { 
height:10%; 
border-top: solid 1px; 
background: rgba(150,150,150,0.5); 
width: 100%; 
height: 40px; 
padding-top: 10px; 
text-align: center; 
}

這裏，如果在大或有人屏幕尺寸縮小屏幕，或者如果在頁面內容非常少，頁腳將始終保持在頁面的底部。

來源

2017-05-30 09:27:52

-1

如果您可以使用flexbox，那就是您的解決方案。看看這裏的CSS技巧 - 你不需要更多。 https://css-tricks.com/couple-takes-sticky-footer/

HTML：

<body> 
    <div class="content"> 
    content 
    </div> 
    <footer class="footer"></footer> 
</body>

CSS：

html, body { 
    height: 100%; 
} 
body { 
    display: flex; 
    flex-direction: column; 
} 
.content { 
    flex: 1 0 auto; 
}

來源

2017-05-30 09:28:29 Samuell

CSS：如何將頁腳附加到頁面的底部

回答

相關問題