我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm),有一个脚注,我不能坐在页面的底部。

我想让页脚

当页面较短且屏幕未被填充时,坚持在窗口底部 当有超过一个屏幕的内容时,保持在文档末尾,并像往常一样向下移动(而不是重叠内容)。

CSS是继承的,让我困惑。我似乎不能正确地改变它,把一个最小高度的内容或使页脚到底部。


当前回答

我做了什么

Html

    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>

CSS

.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }

不需要使用位置固定和绝对。只需以适当的方式编写html即可。

其他回答

从IE7开始,你可以简单地使用

#footer {
    position:fixed;
    bottom:0;
}

参见caniuse寻求支持。

对我有用。

#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}


<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

#{容器 身高:100 vh; 保证金:0; 显示:flex; flex-direction:列; } #页脚{ margin-top:汽车; } < div id = "容器" > < div id = "头" >头< / div > 身体< div id = "身体" > < / div > < div id = "脚注" >页脚< / div > < / div >

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

位置固定,底部,左边和右边设置为0最适合我:

.footer {    
    position: fixed;
    background : #d1ccc0;
    bottom : 0;
    left : 0;
    right : 0;
    height : 50px;
}

绝对位置不会粘在底部,但固定位置会。

我的jQuery方法,这一个把页脚放在页面的底部,如果页面内容小于窗口高度,或者只是把页脚放在内容之后,否则:

此外,在其他代码之前将代码保存在自己的附件中,将减少重新定位页脚所需的时间。

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();