此刻我正在處理HTML佈局，並且無法確定結果不是我想要的。看到下面的圖像，紅色箭頭顯示不應該在那裏的空間。頁腳的白色部分應位於瀏覽器的底部。CSS佈局頁腳不在瀏覽器底部
我幾乎嘗試了一切，我認爲這個問題是與下面的HTML的CSS：
<ul class="footer-trust">
如果我從HTML刪除此比頁腳是在頁面的底部而不是懸掛在它上面約50px。 我在jsfiddle上發佈了HTML，請參閱鏈接：http://jsfiddle.net/Cb4Jy/
我希望有人知道該修復程序，因爲我正在掙扎幾個小時，只是不再看到它！
更改以下屬性：
#service-footer { height: 261px; }
#subfooter { top: 0; }
您的標記和技術得有點過火了，這在使這些類型的問題更難以調試轉的結果。
我已經清理了你的代碼，刪除了不必要的嵌套div，並用CSS技術替換了簡單的效果（陰影）。這是一個更清潔，適應性更強的方法。
爲了實現粘頁腳，我已經利用網頁中列出的方法：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
HTML：
<body>
<div id="wrapper">
<div id="top">Candy canes croissant gingerbread jelly beans.</div>
<div id="container">
<div class="content">Unerdwear.com chocolate cake dragée cotton candy cheesecake marzipan gummies marzipan. Unerdwear.com tiramisu danish topping marshmallow bear claw macaroon jujubes. Chocolate cake applicake carrot cake croissant muffin soufflé croissant cake apple pie. Gingerbread powder jelly soufflé. Lemon drops sweet roll lollipop caramels caramels. Soufflé wafer jelly beans macaroon carrot cake gummi bears macaroon. Tootsie roll soufflé biscuit toffee fruitcake. Gingerbread macaroon oat cake fruitcake chocolate bar applicake icing chocolate cake. Cookie icing chocolate bar oat cake cupcake candy. Gummi bears cake oat cake soufflé liquorice dragée sweet liquorice. Candy lollipop icing. Apple pie sesame snaps lollipop. Bear claw bear claw oat cake muffin lemon drops sweet danish. Marshmallow gummies halvah cheesecake jelly-o gummi bears dragée. Candy canes croissant gingerbread jelly beans. Pastry bear claw gingerbread fruitcake. Icing brownie tiramisu. Macaroon carrot cake ice cream biscuit sugar plum muffin. Chocolate pastry cheesecake. Croissant cotton candy sweet unerdwear.com chocolate bar. Tootsie roll cookie topping caramels applicake danish tootsie roll. Biscuit macaroon candy soufflé cotton candy caramels. Carrot cake pudding toffee cotton candy jelly. Liquorice marzipan toffee bonbon sugar plum. Cupcake gummi bears cake powder topping cake dessert jelly. Wafer wafer jujubes icing donut bear claw sesame snaps oat cake candy canes. Oat cake cotton candy jelly beans. Cotton candy topping jujubes cookie gummi bears. Gummi bears tootsie roll cheesecake candy jelly-o sugar plum. Cake biscuit lollipop icing ice cream tootsie roll carrot cake cookie pie. Brownie dragée wafer macaroon cotton candy topping cupcake. Biscuit dragée dragée cookie. Tart chocolate candy jelly jujubes cheesecake cupcake cheesecake chocolate. Gummies cheesecake tart pie jelly danish. Tiramisu cotton candy lemon drops tart muffin candy tootsie roll candy canes carrot cake. Marshmallow jelly-o gingerbread. Lollipop tootsie roll wafer sugar plum sesame snaps marzipan powder chocolate cake. Cake chocolate bonbon. Dragée donut caramels. Sweet chocolate bar sweet roll halvah sweet.</div>
</div><!-- end #container -->
<footer id="footer" class="content">
<ul class="footer-trust">
<li><a href="#" class="trust-link trust-1"></a>
</li>
<li><a href="#" class="trust-link trust-2"></a>
</li>
<li><a href="#" class="trust-link trust-3"></a>
</li>
<li><a href="#" class="trust-link trust-4"></a>
</li>
</ul>
<div class="footer-agreement">
<p>Marshmallow jelly-o gingerbread. Lollipop tootsie roll wafer sugar plum sesame snaps marzipan powder chocolate cake</p> <address>Copyright © Carrot cake pudding toffee cotton candy jelly. </address>
</div>
</footer>
</div><!-- end #wrapper -->
</body>
CSS：
html, body, #wrapper {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: #f3f3f3;
height: 100%;
font-family:Arial, Geneva, Helvetica, sans-serif;
font-size: 12px;
}
p {
margin:0px;
}
.content {
background: #FFF;
padding: 15px;
-webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.6);
-moz-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.6);
box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.6);
}
#wrapper {
padding: 0 30px;
width: 1000px;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#container:after {
display: block;
height: 50px;
content: "";
width: 100%;
}
#container .content { margin: 50px 0 20px; }
#footer {
display: block;
height: 50px;
margin: 0 auto;
}
#top {
position: fixed;
top: 0px;
width: 100%;
height: 30px;
background-color: white;
z-index: 1;
box-shadow: 0px 0px 15px 0px gray;
}
ul.footer-trust {
list-style: none;
margin: 0px;
padding: 0px;
}
.footer-agreement {
text-align: right;
font-size: 10px;
}
ul.footer-trust li {
float: left;
padding-right: 23px;
}
.trust-link {
background: url('https://dl.dropboxusercontent.com/u/60346690/footer-logos.png') no-repeat;
display: block;
}
.trust-1 {
width: 74px;
height: 23px;
background-position: 0 0;
}
.trust-2 {
width: 25px;
height: 23px;
background-position: -75px 0;
}
.trust-3{
width: 52px;
height: 23px;
background-position: -101px 0;
}
.trust-4{
width: 21px;
height: 23px;
background-position: -154px 0;
}
我的頁腳有同樣的問題。你有沒有試過設置這個 - >位置：相對;底部：0;寬度：100％;高度：30px;您的頁腳是 – 2013-10-16 15:07:05
http://stackoverflow.com/questions/19192211/css-how-to-style-a-footer 我有類似的問題。檢查這個鏈接。 – Pavel
老實說，你的標記是一團糟，充滿了CSS黑客。你過於複雜的結構.... – Axel