使用css在页面顶部和底部放置图片答案

【问题标题】：Using css to place an image at the top of the page and the bottom使用css在页面顶部和底部放置图片
【发布时间】：2012-02-22 06:34:47
【问题描述】：

我一直在尝试解决这个问题，但没有取得多大成功。我基本上是在尝试使用背景属性在页面的顶部和底部放置图像。现在我知道我可以进行相对定位，它会根据页面上的内容量将图像放在底部移动。

我还可以使页眉/页脚成为绝对位置，并有效地让用户在它们之间滚动。但是我想把它放在如果没有很多内容的地方，我想把图像放在页面底部，如果恰好有很多内容（即用户必须滚动浏览），图像被放置在底部。

这只是我试图为自己弄清楚的一件小事，因此任何关于此的想法/建议或教程将不胜感激。我宁愿不使用表格来布局我的页面并想知道如何去做。

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

您能否将padding-bottom 应用于您的<body>，然后使用background-image 将您的图像应用于它？如果没有，请参阅我对这个问题的回答，了解如何使页脚 DIV 粘在页面底部：Sticky footer, or rather: content doesn't stretch down to footer

【讨论】：

【解决方案2】：

如果您正在寻找这样的东西：

|图片 |

|内容 |

|页脚 |

那为什么需要使用绝对定位呢？如果您有 3 个 div，一个在另一个之上，具有一定的宽度和属性clear:both，那么排列将是自动的。然后，如果您的页面内容很少，您可以将min-height 放入内容 div。

【讨论】：

【解决方案3】：

对于作为标题的第一张图片，将位置设置为“固定”，顶部设置为 0px：

.first-image {
    position: fixed;
    top: 0px;
    left: 0px;
}

对于作为页脚的第二张图片，将位置设置为“固定”，底部设置为 0px；

.second-image {
    position: fixed;
    bottom: 0px;
    left: 0px;
}

【讨论】：

是的，我知道我可以做到这一点，但我更希望图像不会固定在页面上。我不希望它们在用户开始滚动内容时出现。只有当内容很少时，我才希望它们同时出现在窗口上，否则页脚图像应该调整自身到内容的底部。
我想根据原始问题，您究竟想要达到什么目的有点不清楚。能不能画个线框？