26

这是我的代码：

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

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

编辑：为了更清楚地了解问题所在：页面加载时，页脚按预期显示在底部。但是，当网页的高度大于屏幕上的尺寸以致出现滚动条时，页脚将停留在同一位置。也就是说，当页面高度 <= 100% 时，页脚在底部。但是，当页面高度 >100% 时，页脚不在该页面的底部，而是在可见屏幕的底部。

编辑：令人惊讶的是，以下解决方案均无效。我最终实现了一个侧边栏。

4

10 回答 10

28

你可能正在寻找这个例子：

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

*/
于 2011-04-01T17:46:44.907 回答
6

尝试这个：

position: fixed;  
bottom: 0;
于 2013-04-05T06:26:41.413 回答
2

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

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

于 2017-05-11T16:18:27.673 回答
1

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

.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 */
  }
于 2011-04-01T17:51:41.813 回答
0

不要使用位置：绝对；对于任何页脚，因为页面的高度会发生变化。如果它是绝对的，那么您的页脚将不会随页面高度移动。

您想使用 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>
于 2011-04-01T18:02:48.733 回答
0 
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
于 2011-04-01T18:41:25.100 回答
0

我努力寻找解决方案，因为所有建议都没有达到我想要的效果：

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

这对我有用：

html:

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

CSS：

body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}

在这里行动。

于 2017-02-17T22:24:16.803 回答
0

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

.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
于 2015-09-16T20:03:57.303 回答
0 
.footer-small, .push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

这也对我有用....

于 2015-12-16T04:16:36.470 回答
-3

为什么不使用 jquery？

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

<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>
于 2014-02-25T22:27:29.580 回答