Question

以下是我的粘性页脚的一段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>

Answer 1

尝试将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>

您可以尝试这种方式来完成您的项目。想法是您的主要容器应该具有整个视图端口的高度，并且您的页脚将相对于此容器位于底部。

可调节粘性页脚CSS的轻微问题

1 个答案: