当内容动态化时，将页脚粘贴到页面底部

我有两页包含页脚的HTML页面。我想在两页中都将页脚粘贴到页面的底部。当页面没有垂直滚动但内容很多时页面可以正常工作，并且页面具有滚动页脚可以覆盖我的内容。这是我的页面布局：当内容动态化时，将页脚粘贴到页面底部

<body> 
    <div id="container"> 
     <div id="header"> Header </div> 
     <div id="menu"> Menu </div>   
     <div id="content"> Content </div> 
     <div id="footer"> Footer </div>     
    </div> 
</body>

，这里是我的CSS：

html, body 
{ 
    width:100%; 
    margin:0; 
} 

#header, #menu, #content, #footer 
{ 
    border:thin solid #000; 
} 

#content 
{ 
    width:70%; 
    margin: 0 auto; 
    height:100%; 
} 

#footer 
{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
    background-color:#06F; 
}

来源

2012-09-08 Beginner

删除'位置：绝对;'在#footer上 –

您可以通过这种方式尝试这种

#footer { 
    background-color: #0066FF; 
    width: 100%; 

}

来源

2012-09-08 14:45:55 ram

它不再工作。 – Beginner

#footer {background-color: #0066FF;bottom: 0;position: absolute;width: 100%;bottom:0px;} 
     body,html {height:100%}

你会得到你的输出

来源

2012-09-08 14:58:50 supersaiyan

只有当您的页面上没有大量数据时才有效。我的意思是，当你的页面没有垂直滚动时，它就可以工作。顺便说一下，我自己的CSS是一样的。 – Beginner

改变你的CSS;

#footer{ 
    width:100%; 
    background-color:#06F; 
}

Here是一个工作现场演示。

如果你想将页脚粘到最下面，不管内容是什么，试试吧;

#footer{ 
    width:100%; 
    background-color:#06F; 
    bottom:0; 
    position: fixed; 
}

但定义height你的页脚和padding-bottom相同数量添加到您的内容，否则一些文本可能页脚隐藏

Here是一个工作现场演示。

来源

2012-09-08 15:02:14

感谢您的回答，但这不是我想要的。页脚已在您的解决方案中修复。 – Beginner

当内容动态化时，将页脚粘贴到页面底部

回答

相关问题