以下是我的粘性页脚的一段 CSS 代码。只有一个问题；每当我在最大化窗口中打开网站时，如果内容不多，粘性页脚就可以正常工作。但是，当我在还原的向下窗口中打开它时，页脚最终位于页面中间。我想要做的就是让我的页脚跟在正文的内容之后。如果内容没有填满整个屏幕，那么页脚应该出现在底部，如果内容填满屏幕，页脚应该出现在内容之后的底部。请告诉我如何修改 CSS 以解决此问题。
.footy {
height: 100px;
position:absolute;
color: #eaeaea;
background-color: #333333;
bottom: 0;
width: 100%;
max-width:100%;
margin-left: -8px;
}
.footin {
padding-top: 45px;
width:900px;
margin:0 auto;
}
<div class="footy">
<div align="left" class="footin"> LLC. 2012 All rights reserved © </div>
</div>
最佳答案
尝试在放置页脚的主容器中添加 min-height 和 position:relative。
编辑:
<html>
<head>
<title>You site Title</title>
<style>
body,html{margin:0;padding:0;}
#wrapper{position:relative;min-height:700px;background-color:#ccc;}
#footer{position:absolute;bottom:0;background-color:#ff4345;height:100px;width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- header code-->
</div>
<div id="content">
<!--your content goes here-->
</div>
<div id="footer">
<!--your footer code goes here-->
</div>
</div>
</body>
</html>
你可以尝试这种方式来完成你的元素。这个想法是你的主容器应该有整个视口(viewport)的高度，你的页脚将与底部的这个容器相对定位。
关于html - Adjustable Sticky footer CSS 的小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10894622/