CSS的粘滯頁腳錯誤
[英]Sticky Footer Error with CSS
問題描述
我已經嘗試了所有方法，但似乎無法使頁腳堅持到底。
我一直在移動東西，可能使代碼有些混亂。
我對較長（更多內容）頁面上的顯示情況感到滿意。 但這使我在內容較少的頁面上留出了很多空白。
幫助將不勝感激！
@charset "UTF-8"; * { margin: 0; } /* Body */ html, body { font-family: 'Questrial', sans-serif; background-image: url('mila_background_btm.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom; margin: 0; padding: 0; min-height: 100%; } /* Text */ h1 { text-align: center; margin-top: 30px; margin-bottom: 30px; color: #3A3366 } h2 { text-align: center; margin-top: 20px; color: #2D4B5B; margin-bottom: 20px; } p { margin-top: 1; text-align: center; line-height: 150%; } /* Container */ .container { width: 90%; margin-top: 10px; margin-left: auto; margin-right: auto; text-decoration: none; height: 100%; padding-bottom: 50px; } /* Navigation */ header { font-family: 'Questrial', sans-serif; width: 90%; height: 9%; background-color: #fff; border-bottom: 2px solid #312f47; text-decoration: none; margin-left: auto; margin-right: auto; } nav { float: right; width: 70%; text-align: right; margin-right: 0px; margin-top: 35px; } nav a { font-size: 1rem; padding: .5rem; text-decoration: none; color: #312f47; } a:hover { background: #312f47; color: white; } nav a:first-child { display: none; } .current { color: #9390A6; } /* Images */ .gallery { margin-bottom: 100px; height: 100%; } .photos { max-width: 50%; } .contact { display: block; margin: auto; margin-top: 50px; } /* Google Maps */ .google-maps { position: relative; padding-bottom: 16.6%; height: 0; overflow: hidden; margin-top: 50px; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video { position: relative; padding-bottom: 56.25%; padding-top: 80px; height: 0; overflow: hidden; margin-top: 50px; } .video iframe { position: absolute; top: 0; left: 15%; width: 70%; height: 70%; } /* Footer */ footer { font-size: 8pt; color: #707070; text-align: center; height: 50px; margin-top: 50px; position: relative; }
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="container"> <header> <nav> </nav> </header> </div> <footer> </footer> </body> </html>
3 個解決方案
解決方案1
0 2016-10-13 22:38:10
頁腳標記之間沒有文本，這就是為什么看不到頁腳的原因，如果添加背景色，它將更加清晰。
例如，您應該在html頁腳標記中添加class =“ site-footer” 。
<footer class="site-footer">
The Footer.
</footer>
以及CSS文件中的類定義：
.site-footer{
height: 120px;
background: red;
}
您也可以使用該鏈接作為參考。
解決方案2
0 2016-10-13 22:38:39
為.content添加相對於視口的最小高度。
減少110px像素（填充底部：50像素；邊距頂部：10像素；頁腳高度：50像素）
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
}
@charset "UTF-8"; * { margin: 0; } /* Body */ html, body { font-family: 'Questrial', sans-serif; background-image: url('mila_background_btm.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom; margin: 0; padding: 0; min-height: 100%; } /* Text */ h1 { text-align: center; margin-top: 30px; margin-bottom: 30px; color: #3A3366 } h2 { text-align: center; margin-top: 20px; color: #2D4B5B; margin-bottom: 20px; } p { margin-top: 1; text-align: center; line-height: 150%; } /* Container */ .container { width: 90%; margin-top: 10px; margin-left: auto; margin-right: auto; text-decoration: none; height: 100%; padding-bottom: 50px; } /* Navigation */ header { font-family: 'Questrial', sans-serif; width: 90%; height: 9%; background-color: #fff; border-bottom: 2px solid #312f47; text-decoration: none; margin-left: auto; margin-right: auto; } nav { float: right; width: 70%; text-align: right; margin-right: 0px; margin-top: 35px; } nav a { font-size: 1rem; padding: .5rem; text-decoration: none; color: #312f47; } a:hover { background: #312f47; color: white; } nav a:first-child { display: none; } .current { color: #9390A6; } /* Images */ .gallery { margin-bottom: 100px; height: 100%; } .photos { max-width: 50%; } .contact { display: block; margin: auto; margin-top: 50px; } /* Google Maps */ .google-maps { position: relative; padding-bottom: 16.6%; height: 0; overflow: hidden; margin-top: 50px; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video { position: relative; padding-bottom: 56.25%; padding-top: 80px; height: 0; overflow: hidden; margin-top: 50px; } .video iframe { position: absolute; top: 0; left: 15%; width: 70%; height: 70%; } .container { min-height: calc(100vh - 110px) } /* Footer */ footer { font-size: 8pt; color: #707070; text-align: center; height: 50px; width: 100%; background-color: #ccc; }
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="container"> <header> <nav> </nav> </header> </div> <footer> My footer </footer> </body> </html>
解決方案3
0 2016-10-13 22:44:22
我正在使用它作為頁腳，它可以與我完美配合：
html,body,ul,a,li{ margin:0; padding:0; border:0; outline:none; vertical-align:top; height:100%; text-decoration:none; } .wrap{width:100%; min-height:100%; height: auto !important; height:100%;margin:0 auto; display:block; background:lightblue;} footer{ bottom:0px; display:block; width:100%; height:auto;} #fo-wrap{width:100%; height:100px; background-color:#FF2E99;}
<!DOCTYPE html> <html> <head> </head> <body> <div class='wrap'> here every thing in page </div> <footer> <div id='fo-wrap'> here footer content </div> </footer> </body> </html>
CSS 粘性頁腳的問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.