我有两页包含页脚的 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;
}
最佳答案
改变你的CSS;
#footer{
width:100%;
background-color:#06F;
}
<强> Here 是一个有效的实时演示。
如果您希望页脚粘在底部，无论内容是什么，请尝试；
#footer{
width:100%;
background-color:#06F;
bottom:0;
position: fixed;
}
但要为页脚定义一个height，并为您的内容添加相同数量的padding-bottom，否则某些文本可能会被页脚隐藏
<强> Here 是一个有效的实时演示。
关于html - 当内容是动态的时，将页脚粘贴到页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12331690/