Html 可调粘性页脚CSS存在轻微问题_Html_Css

Html 可调粘性页脚CSS存在轻微问题

html css

Html 可调粘性页脚CSS存在轻微问题,html,css,Html,Css,下面是我的粘性页脚的一段CSS代码。只有一个问题,；每当我在最大化的窗口中打开站点时，如果没有太多内容，那么粘性页脚就可以正常工作。但是，当我在恢复的下窗口打开它时，页脚就会在页面中间结束。我想做的就是在正文内容之后保留页脚。如果内容未填充整个屏幕，则页脚应显示在底部，如果内容填充的内容超过屏幕，则页脚应显示在内容之后的底部。请让我知道如何修改CSS来解决这个问题 .footy{ 高度：100px；位置：绝对位置；颜色：#eaeaea；背景色：#333333；底部：0；宽度：100%；

下面是我的粘性页脚的一段CSS代码。只有一个问题,；每当我在最大化的窗口中打开站点时，如果没有太多内容，那么粘性页脚就可以正常工作。但是，当我在恢复的下窗口打开它时，页脚就会在页面中间结束。我想做的就是在正文内容之后保留页脚。如果内容未填充整个屏幕，则页脚应显示在底部，如果内容填充的内容超过屏幕，则页脚应显示在内容之后的底部。请让我知道如何修改CSS来解决这个问题

.footy{
高度：100px；
位置：绝对位置；
颜色：#eaeaea；
背景色：#333333；
底部：0；
宽度：100%；
最大宽度：100%；
左边距：-8px；
}
.footin{
填充顶部：45px；
宽度：900px；
保证金：0自动；
}


有限责任公司2012保留所有权利和副本；

尝试将

最小高度

和

位置：相对

添加到放置页脚的主容器中

编辑：

    <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>


你的网站标题
正文，html{margin:0；padding:0；}
#包装{位置：相对；最小高度：700px；背景色：#ccc；}
#页脚{位置：绝对；底部：0；背景色：#ff4345；高度：100px；宽度：100%；}

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

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

位置：静态因为这样做可以实现一个功能，但是如果页面上的内容很少，因此页脚不会粘到底，那么它就不起作用了