内容页眉页脚

我的网页有问题。问题在于内容在页脚下。内容页眉页脚

见我的问题在这里 http://www.webdevout.net/test?0138

容器是

height:100%

position:relative 而页脚是absolute和bottom:0; 我以为页脚作出这样，我缺少什么？我需要页脚始终与内容保持50px（可能）的距离。

来源

2013-11-14 anonamas

只有链接到网站的“调试我的网站”问题可能会被关闭。为了避免它，你应该创建一个最小但完整的例子来显示问题并粘贴问题中的代码。另请参阅[我的网站或项目中的某些内容不起作用。我可以只粘贴一个链接吗？]（http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste -a-link-to-it） – JJJ

我认为这个问题与整个页面有关，不仅仅是一个带有3个div的小样本。 – anonamas

如果你从页脚中删除绝对位置，你会好起来的，然后放置一个50px的margin-top;

div.footer { 
    height: 70px; 
    width: 100%; 
    padding: 10px; 
    padding-left: 20px; 
    background: #F2F2F2; 
    border-top: 1px solid #ccc; 
    clear: both; 
    margin-top: 50px; 
}

来源

2013-11-14 10:28:52

我需要页脚粘到底部。页面大小不同。 – anonamas

这将帮助你:) http://ryanfait.com/sticky-footer/ –

我实际上已经尝试过。它不起作用。 – anonamas

由于.footer的位置是绝对的，所以它不会“向下”推送html内容。如果您添加 padding-bottom：40px; 至 div.main {

它看起来不错。

这使得大。主要

div.main { 
width:800px; 
min-height:400px; 
margin-top:40px; 
padding-bottom: 40px; 
padding-left:20px; 
}

来源

2013-11-14 10:29:37

你并不需要绝对位置在这种情况下，因为你要遵循正确的页面流;绝对位置不考虑其他元素，因此您的页脚悬停您的内容是合乎逻辑的。

只需删除绝对位置并添加一些边距。 ;）

来源

2013-11-14 10:29:40

添加一些边距？如果每个页面的页面大小不同，这会非常有用吗？ – anonamas

是的，因为与相对位置你的页脚将刚刚在前面的div下，尊重页面流。了解更多关于如何在HTML页面中呈现div的原因，因为您似乎误解了很多概念。 ;）例如：http://www.brainjar.com/css/positioning/ –

使用Firebug进行检查后，我发现从CSS中的div.footer类中删除“position：absolute”可以解决问题。

来源

2013-11-14 10:40:36

如果页面尺寸较小，则不会。 – anonamas

你现在看到什么？页脚不会被推到页面的底部？也许上述关于利润的答案澄清了这一点？ –

内容页眉页脚

回答

相关问题