具有不同内容高度的底部边距答案

【问题标题】：Bottom-Margin with varying content height具有不同内容高度的底部边距
【发布时间】：2011-04-27 15:00:11
【问题描述】：

我有一个问题一直在尝试解决，但没有任何进展。

这是我的代码摘要：

body {
  background-image: url('img/bg_Body.gif');
  margin: 0px 0px 0px 0px;
}

#container {
  position: relative;
  width: 880px;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  min-height: 100%;
}

#content {
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url('img/faux_tile.png');
  min-height: 200px;
  padding-top: 105px;
  padding-right: 80px;
  min-width: 400px;
  padding-left: 80px;
  padding-bottom: 110px;
}

<div id="container">
  <div id="content">
    Some content here (Varying height)
  </div>
</div>

如何在内容和页尾之间添加边距？

faux_tile.png 覆盖到页面末尾，我想要页面末尾和 faux_tile.png 之间的边距，这是显示 bg_Body.gif 的小边距。

【问题讨论】：

附带说明，#content 真的需要是position: absolute 吗？没有其他方法可以实现您想要实现的目标吗？（我现在无法判断）

标签： html css containers margin footer

【解决方案1】：

你可以给body 一个margin-bottom。

即使您的容器是position: absolute，应该强制设置边距。

【讨论】：

您好，感谢您的建议。 margin-bottom 似乎不起作用，好像我把 margin-bottom: 900px; ，它显示了 100px 左右的边距，但是当内容高度增加时，边距减小。无论内容的长度如何，我都需要一个固定的边距高度。
@initialsHL 啊，好的。好吧，这是一个问题的原因是position: absolute。为什么你首先需要它？我真的看不出你提出的场景有什么好处——还有更多的好处吗？
不，我没有专门设置 position: absolute，只是 Microsoft Expression Web 4 在我添加
时将其设置为默认值。你能帮我编辑我的文件，这样无论内容的长度如何，底部都会有一个显示背景图像的边距吗？这是我的文件：mediafire.com/?lmnsfa1vinkc1q5 非常感谢！
@initials 如果你删除 position: absolute 给正文一个 margin-bottom 将起作用。

【解决方案2】：

试试这个：

#content {
    position: absolute;
    top: 0px;
    left: 0px;
    right:0;
    bottom:20px; /*this should give you 20px margin at the bottom*/
    background-image: url('img/faux_tile.png');
    min-height: 200px;
    padding-top: 105px;
    padding-right: 80px;
    min-width: 400px;
    padding-left: 80px;
    padding-bottom: 110px;
}

另一种方法是给#container 一个小于100% 的min-height

【讨论】：

您好，感谢您的建议，但两者都不适合我。首先，它导致 padding-bottom 增加或减少内容的高度。而且无论我为#container min-height 设置什么值，它都保持相同的高度，即使它是 500% 的高度。
如何与上面相同，但删除padding-bottom
它在底部显示了一个边距，但降低了#content高度并且一些文本超出了#content。
好的，这是一个好的开始。你的总高度将是min-height + padding-bottom + padding-top 所以如果你通过bottom:20px在底部添加20px，然后从min-height中删除20px
您好，谢谢，但还是不行。你能帮我编辑我的 style.css 以在底部创建一个边距吗？我的文件在这里：mediafire.com/?lmnsfa1vinkc1q5 我需要边距来显示背景图像。非常感谢！