页脚不能动态适应页面大小答案

【问题标题】：Footer doesn't adapt dynamically to page size页脚不能动态适应页面大小
【发布时间】：2015-12-27 14:59:00
【问题描述】：

我这边有一个页脚 div，不管内容如何，它都应该在最底部。

当页面加载时，footer 看起来不错，但是当另一个 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/

【问题讨论】：

为什么不使用 z-index？

标签： html css

【解决方案1】：

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

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

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

~~另外，你还没有关闭footer的} CSS规则。~~

【讨论】：

谢谢，但正如我所提到的，我希望页脚位于内容“下方”，而不是“上方”。因此，如果文本过多，页脚应始终位于页面的最底部。
@user1170330 您所要求的功能完全不同。它被称为粘性页脚。
是的，这正是我想要的。
@user1170330 好的，将指导您。检查A CSS Sticky Footer that just works
@user1170330 如果链接指导你正确的事情，请不要忘记接受我的回答。

【解决方案2】：

尝试相对位置。

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

如果你使用绝对，它会将页脚置于文档流之外。

See this fiddle.

【讨论】：

正是我即将发布的内容.. :)
这可行，但仅限于大量文本。但如果我只有很少的内容，页脚几乎浮动在页面的中心。但它应该始终处于最底层。
@user1170330 你为什么不给 div 一个最小高度？
@user1170330 好像我误解了你在问什么。假设你不想要一个粘性页脚。 Praveen Kumar 的回答会做到这一点。

【解决方案3】：

你应该把页脚和内容都放在一个 div 中，说它的 id 是“包装器”，它的填充底部应该与页脚高度相同，它的位置应该是相对的。然后将页脚位置设置为绝对位置，底部为 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/

【讨论】：

【解决方案4】：

您可以通过像下面这样构造 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】：

您需要做的就是设置 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>

【讨论】：