可调整粘滞页脚 CSS 的小问题答案

【问题标题】：Slight issue with Adjustable Sticky footer CSS可调整粘滞页脚 CSS 的小问题
【发布时间】：2012-06-05 18:50:34
【问题描述】：

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

【问题讨论】：

请告诉我如何在position:static; 时将页脚固定在底部，因为这样做可以完成一项功能，但如果页面上的内容非常少，则它不起作用，因此页脚不粘在底部

标签： html css

【解决方案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>

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

【讨论】：

当我将位置更改为 position:relative 时，结果是在页面顶部而不是底部显示页脚..
请告诉我如何在 position:static 时将页脚粘贴到底部；因为这样做可以完成一项功能，但如果页面上的内容非常少，因此页脚不会粘在底部，它就不起作用
它成功了尝试添加一个最小高度和位置：相对于您放置页脚的主容器。