为什么我的页脚重叠在我的页面底部的内容？

网站的问题：christianselig.com 为什么我的页脚重叠在我的页面底部的内容？

在我有一个消息，说该页面下方的“就像你看到的，我们应该谈谈？”。但由于某种原因，与其他页面不同，这一页与页脚重叠。

CSS：

.message { 
    margin: 150px 0; 
    text-align: center; 
}

HTML：

  <div class="message"> 
       <span class="first-part">Like what you see?</span> 
       <span class="second-part"><a href="contact.html">We should talk.</a></span> 
      </div> 

      <div class="footer-wrapper"> 
       <div class="footer"> 
        <p class="copyright">Copyright &copy; 2012 Christian Selig</p> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="about.html">About</a></li> 
         <li><a href="#work" class="scroll">Work</a></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </div> 
      </div>

正如你所看到的，我还以为我给的顶部和底部边缘的.message CSS 150像素，但它似乎并没有被踢在底部。我可以给它填充，但似乎并没有被妥善的解决办法，因为我不想要的元素跨越这么多空间，我只是希望它推向其他的东西了。

潜力的认识：边距推它的内容了，但必须有内容在那里。因为它是最后一个元素的网页上，它没有任何关系推离，所以填充是必要的？如果这是真的，还有更好的方法吗？

来源

2012-09-16 Doug Smith

填充为我的伟大工程：

.message { 
    padding: 150px 0; 
    text-align: center; 
}

http://fiddle.jshell.net/3EYdq/2/show/

来源

2012-09-16 00:17:27 yckart

请将这些问题标记为已回答！ – yckart

从div.footer-wrapper然后取出position: absolute;调整您的.messagediv.message

.footer-wrapper { 
    background: -moz-linear-gradient(center top , #F7F7F7 0%, #D6D6D6 100%) repeat scroll 0 0 transparent; 
    border-top: 1px solid #CCCCCC; 
    bottom: 0; 
    height: 16px; 
    overflow: hidden; 
    padding: 8px 0 5px; 
    width: 100%; 
}

你不需要填充边缘，这里的错误是绝对定位的.footer-wrapper DIV而不需要（据我可以看到？）

编辑：作为另一个答复中提到，结算是有点乱。加入

.wrapper { 
    padding-bottom: 1px; 
}

似乎帮助，如果你想速战速决，但是正确的清算会的方式更好。为您的网站在IE怪癖模式更显示错误呈现

<!doctype html>

：

还，您可能希望将文档类型添加到您的页面的顶部，等等。

来源

2012-09-16 00:16:24 Luca

如果内容小于屏幕，则不会很漂亮;） – yckart

如果他想实现粘性页脚，则为true，在这种情况下，问题位于其他位置。 – Luca

也许，我同意！ :) – yckart

这是因为你的页脚是绝对定位在底部，放置在无论发生在那里。

只需添加像50像素到.message底部填充，并且如果将其下的额外空间。

.message { 
    margin: 150px 0; 
    padding-bottom: 50px; 
    text-align: center; 
}

来源

2012-09-16 00:30:35 Krycke

一切都有些破碎，因为你没有清除你的浮动。个人信息

您可以使用此clearfix

.cf:before, 
.cf:after { 
    content: " "; 
    display: table; 
} 

.cf:after { 
    clear: both; 
} 

.cf { 
    *zoom: 1; 
}

，然后将其应用到<div class="personal-info cf">

此外，最好使用sticky footer而不是绝对位置。正如yckart所说，填充也是一个很好的方法。

来源

2012-09-16 00:31:07

为什么我的页脚重叠在我的页面底部的内容？

回答

相关问题