0

以下是我的粘性页脚的一段 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 &copy; </div>
</div>
4

1 回答 1

1

尝试将min-heightand添加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>

你可以尝试这种方式来完成你的项目。这个想法是你的主容器应该有整个视口的高度，你的页脚将相对于这个容器在底部的位置。

于 2012-06-05T10:12:31.270 回答