如何将一个HTML元素固定在另一个元素底部？

Question

如何将一个HTML元素固定在另一个元素底部？

5

我有一个简单的问题，涉及到编程。我正在寻找一种用相对简单的HTML表示文本文档（如书页）的方法。每个HTML文档可以显示多个页面。我遇到的最大问题是页脚。当然，我希望它很简单；也许只是一个<FOOTER>标签和其中的纯文本。然而，无论在其前面有多少文本，我都无法想象如何强制将其固定在页面底部。是否有任何方法将HTML元素固定在另一个元素的底部？ 以下是一个示例：

http://prog.bhstudios.org/documents.htm

position:relative 不起作用，因为我不知道页脚的原始位置在哪里，除了“在其父元素内的某个位置”之外。

position:absolute; bottom:0 不起作用，因为它相对于视窗左上角位置而言，而不是相对于元素的父元素。

position:fixed; bottom:0 不起作用，因为它将元素从流中取出，并“固定”在视窗底部，完全独立于元素的父元素。

我希望有一种可以如 float:bottom 一样正常工作的方法。

- Ky -

在你的HTML标记结构中，你不能只是把页脚元素放在“页面”元素之后吗？ - rjml

尝试使用 position:absolute; top:100%; - Lukas Bijaminas

@rjml 我可以这样做，但这与该网页的设计理念相违背。该理念是创建一个HTML标记，使得任何人都能轻松理解，即使他们以前没有使用过HTML。 - Ky -

我当时不认为我理解了 :) - rjml

@rjml 或许看一下被接受的答案可以帮助你理解 :3 - Ky -

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1386320 · Accepted Answer

我刚在做类似的事情：

<div style="position: relative; height: 300px;">
    <h1>some content on top</h1>

    <div style="position: absolute; bottom: 0px; background: #cccccc;">
        this is on bottom!
    </div>
</div>