CSS：

Question

这是我的代码：

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

我不知道这有什么问题 - 有人可以帮忙吗？

编辑：为了更清楚地说明错误：当页面加载时，页脚会按预期显示在底部。但是，当网页的高度>与屏幕上的尺寸相比，滚动条出现时，页脚停留在同一位置。也就是说，当页面的高度<= 100％时，页脚位于底部。但是，当页面高度> 100％时，页脚不在该页面的底部，而是在可见屏幕的底部。

编辑：令人惊讶的是，以下解决方案均无效。我最终改为实施侧边栏。

Answer 1

您可能正在寻找this example：

<div class="wrapper">
    Your content here
    <div class="push"></div>
</div>
<div class="footer">
    Your footer here
</div>

CSS：

对于142像素的页脚

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Answer 2

试试这个：

position: fixed;  
bottom: 0;

Answer 3

我有同样的问题，来到这里寻找答案，没找到，然后自己尝试了几个实验，最后得到解决方案：

#body {
  overflow-y: 0 auto;
}
#footer {
  position: fixed;
  top: 100vh; left: 0;
  margin-top: -100px;
  width: 100%; height: 100px;
  padding: 10px;
  color: #fff; background-color: rgba(0,0,0,0.6);
}

<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
  <span>Some dummy Text</span>
</div>

Answer 4

包装器是页面的其余部分。负/正边距/高度值是魔术发生的地方。

.wrapper 
  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
  }
.footer, .push 
  {
    height: 142px; /* .push must be the same height as .footer */
  }

Answer 5

不要使用position：absolute;对于任何页脚，页面将改变高度。如果它是绝对的，则页脚不会随页面高度移动。

你想使用ryan fait的方法。

虽然我会亲自这样做;

.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}

<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>

这样你就不必乱用负边距和填充。这也很容易成为html5改变#footer到

的一部分

<footer>
</footer>

Answer 6

#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}

Answer 7

这就是我所做的，它导致我的页脚停留在底部。

TestRedirect

Answer 8

.footer-small, .push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

这对我也有用....

Answer 9

我努力寻找解决方案，因为没有一个建议达到我想要的目的：

如果内容较少，请停留在页面底部，而不是在中间。
如果内容足够，请不要粘贴并重叠内容，只需留在底部。
从第一眼看就隐藏它，所以只有当用户向下滚动页脚时才会看到它。

这对我有用：

HTML：

 JsConfig.EmitCamelCaseNames = true;

的CSS：

<body>
  <div class="page-wrapper">
    <h1>
      Page
    </h1>
  </div>
  <footer>
    Footer here
  </footer>
</body>

Here正在行动中。

Answer 10

为什么不用jquery？

在页眉和页脚之间放置一个包装div，并为包装器指定min-height属性，jquery等于文档高度和（页眉高度+页脚高度）之间的差异。

<script type="text/javascript">
$(document).ready(function(){
 var dh = $(document).height(); //document height here
 var hh = $('header').height(); //header height
 var fh = $('footer').height(); //footer height
 var wh = Number(dh - hh - fh); //this is the height for the wrapper
 $('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>

如何强制我的页脚粘贴到CSS中任何页面的底部？

10 个答案:

CSS：