將頁腳保持在頁面最底部的提示？
[英]Tips for keeping the footer at the very bottom of the page?
問題描述
我已經嘗試了一切 - 請幫助！
我的頁腳內容重疊時遇到問題。 我已經為我的頁腳設置了額外的媒體查詢和 padding-top 以防止這種情況發生，但是現在，在我的網站上無緣無故地出現了大量的空白。
我不知道該怎么做才能解決這個問題。 我的 html 設置為
<html>
<head></head>
<body>
<nav></nav>
<div></div>
<footer></footer>
</body></html>
<footer>
<div class="row">
<div class="col" style="margin-left:10px;">
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: bold;font-style: normal;font-size: 20px;">Support</h1>
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Call: ______ </h1>
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Email: ____.net</h1>
</div>
<div class="col" style="margin-left:10px;">
<h1 style="font-family: 'Open Sans', sans-serif;font-weight: bold;font-style: normal;color: rgb(0,43,92);font-size: 20px;”>_____</h1>
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Contact Us!</h1>
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Call: ____ 0</h1><img src="assets/img/logo.svg" style="width: 187px;margin: 0px;padding: 8px;padding-left: 0;padding-right: 0;">
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;”>©2019</h1>
</div>
</div>
</footer>
/*phones*/
@media screen and (max-width: 481px){
footer {
margin-top:2500px;
}
}
/*computer screens*/
@media screen and (max-width: 800px){
footer {
margin-top:3000px;
}
}
@media screen and (max-width: 1920px){
footer {
margin-top:1600px;
}
}
footer {
padding-top: 10px;
}
footer h3 {
font-size: 12pt;
}
footer p {
font-size: 9pt;
}
footer ul {
list-style: none;
width: 100px;
}
footer {
width: 100%;
background-color: #C0C0C0;
}
#footerSect {
width: 900px;
margin: auto;
}
footer h3 {
font-size: 12pt;
}
li {
padding-bottom: 15px;
}
footer p {
font-size: 9pt;
}
到目前為止，如果我沒有在我的 css 中添加 margin-top，我的內容/圖片/文本與頁腳的內容重疊，然后就沒有什么是清晰的了。 這也是特定於移動視圖的 - 它在計算機顯示器或更大的屏幕上看起來很好。
2 個解決方案
解決方案1
2 2019-09-20 04:48:22
這應該能讓你擺脫困境！
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: red; /* or whatever */
width: 100%; /* or whatever */
}
https://jsfiddle.net/3tkphvzc/
如果你發現你的頂部內容仍然重疊，你可以添加一個偷偷摸摸的margin-top: 10000px或其他
解決方案2
1 已采納 2019-09-20 06:02:55
如果您想將頁腳保持在一個位置，我建議您使用 position 固定。 做類似的事情： -
footer { position: fixed; left: 0; bottom: 0; height: 60px; width: 100%; }
然后對於上面的 div，使用的邊距底部大於您為頁腳設置的高度，例如：- 70px。 這樣您的內容將永遠不會重疊。
另一種方法是使用 calc 並從容器主體中減去頁腳的高度，如下所示：
.container { width: 100%; height: calc(100vh - 60px); background: blue; } footer { width: 100%; height: 60px; position: fixed; bottom: 0; left: 0; background: red; }
<div class="container"> <header></header> <div></div> </div> <footer></footer>
將頁腳保持在頁面底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.