Question

如果内容比屏幕高度短，如何使页脚粘到底部，当内容长于屏幕高度时，如何浮动到内容的底部？现在我这样做。

HTML

<body>
<div class='container'>

</div>
<footer>

</footer>
</body>

CSS

.container{
  position:relative;
  min-height:500px;
}

footer{
 height:200px;
 background-color:black;
 position:absolute;
 bottom:0px;
}

当内容短于屏幕尺寸或非常短时，此代码可以正常使用。但我的问题是当内容非常长时（例如屏幕尺寸的两倍），页脚在首次加载页面时会粘到底部。但是当我向下滚动时，页脚会堆叠到新滚动内容的顶部。

Answer 1

$(document).ready(function(){
    var containerHeight = $('.container').outerHeight(true);
    var windowHeight = $('window').height();
    if(containerHeight < windowHeight ){
       $('footer').css('position','fixed');
    }
});

Answer 2

请按照结构来获得结果。

<div class="container">
        <div class="page-header">page-header</div>
        <div class="page-content">page-content 
  <br/>
      <div id="more-cont"></div>
      <input type ="button"value="Add More Content" id="add-more">
  </div>
        <div class="footer">footer</div>
    </div>

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
.container {
    min-height:100%;
    position:relative;
}
.page-header {
    background:#ededed;
    padding:10px;
  background-color:green;
  color:white;
}
.page-content {
    padding-bottom:100px; /* Height of the footer element */
}
.footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

请参阅demo

Answer 3

Demo

css代码：

UITableView

Answer 4

您可以通过向正文添加min-height和padding并将页脚设置为相对于它的绝对位置来轻松完成此操作。

此处为JSfiddle，您也可以使用运行代码段按钮查看结果。

＆＃13;

body {
    min-height: 100%;
    padding-bottom: 200px;
    position: relative;
}
footer {
    position: absolute;
    bottom: 0;
    height: 200px;
    left: 0;
    right: 0;
}

/* just for demo */

.container {
    height: 1000px;
    border: 1px solid green;
}

footer {
    border: 1px solid blue;
}

＆＃13;

<body>
<div class='container'>
  container stuff
</div>
<footer>
  footer stuff
</footer>
</body>

＆＃13;

如何在内容很短但没有在CSS中修复时制作一个粘在底部的页脚？

4 个答案: