Question

我有一个页脚div，无论内容如何，都应位于最底层。

当页面加载时，页脚看起来很好，但是当另一个div加载大量文本时，文本会在页脚下滑动，因此页脚不会动态适应页面大小：

<style>
      #div1 {
      width: 300px;
      margin-top: 300px;
    }

    #footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40px;
    }
</style>

<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>

我知道，position: fixed可以解决我的问题，但我希望页脚“在”内容之下，而不是“结束”。

这是小提琴：https://jsfiddle.net/4fjts5p4/

Answer 1

尝试相对位置。

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

如果使用绝对值，则会将页脚放在文档流之外。

See this fiddle.

Answer 2

您需要做的就是设置position:relative;和height:auto;。这将解决您的所有问题。

<style>
      #div1 {
      width: 300px;
      margin-top: 300px;
    }

    #footer {
      position: relative;
      bottom: 0;
      width: 100%;
      height: auto;
    }
</style>

<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>

Answer 3

你应该将页脚和内容放在div中，说它的id是“wrapper”，它的填充底部应该与页脚高度相同，它的位置应该是相对的。然后将底脚位置设置为绝对值，底部为0。

所以包装div代码：

 #wrapper
    {
      position:relative;
      min-height:100%; /* in case if content is smaller than window size then footer will remain at bottom because of window this */
      padding-bottom:40px;/* same as height of footer */
    }
#footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      background:#0c0;
      height: 40px;
      line-height:40px;
      }

工作演示：https://jsfiddle.net/4fjts5p4/4/

Answer 4

当您使用absolute时，也请使用这些，但我更喜欢position: fixed。这将是完美的：

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 40px;
}

使用min-height而不是height，它不会对高度进行硬编码。

~~此外，您尚未关闭footer的{{1}} CSS规则。~~

Answer 5

您可以通过构建HTML来实现，如下所示：wrapper，content和footer。

关键（也是一个缺点）是设置页脚高度，

演示：http://codepen.io/anon/pen/XXjOam

<强> HTML：

<div id="wrapper">

    <div id="content">          
    </div>

    <div id="footer">           
    </div>

</div>

<强> CSS：

html,
body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
    min-height:100%;
    position:relative;
}

#content {
    padding-bottom:100px;   /* Height of the footer element */
}

#footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

/* For highlighting, you may not need this */
#footer {
    background:#ffab62;
    border-top:1px solid #ff4b02;
    color:#333;
    text-shadow:1px 1px 0 rgba(255,255,255,0.6);
}

页脚不会动态适应页面大小

5 个答案: