（CSS）将元素绑定到底部的方法？答案

【问题标题】：(CSS) Ways to bind element to bottom?（CSS）将元素绑定到底部的方法？
【发布时间】：2015-07-16 18:02:00
【问题描述】：

除了：

之外，还有其他方法可以将 HTML 元素放在底部吗？

position: absolute;
bottom: 0;

在父元素处：

position: relative

...或设置边距以使元素完全适合底部？

【问题讨论】：

请注意，在下面要回答的 cmets 中，OP 显示此上下文是针对声称“广泛的 HTML 4.01 和 CSS 2 级规范支持”的本机应用程序 HTML 呈现框架。所以这不是一个 html5 或 css3 问题（因为它目前被标记）。它甚至不适用于网络浏览器。

标签： html css renderer

【解决方案1】：

好吧，您也可以使用position: fixed; bottom: 0;，它将元素粘贴到窗口底部。这意味着它甚至不会随着页面的其余部分滚动。

当您将其用于全角页脚等（最可能的用例）时，您需要为页面内容的其余部分添加边距，以免它被隐藏在后面 (或隐藏）页脚。

除此之外，您几乎被您提到的选项所困扰。

可以在此处找到有关 position 属性的完整文档： https://developer.mozilla.org/en-US/docs/Web/CSS/position

【讨论】：

【解决方案2】：

你也可以使用position: fixed

.elem {
  position: fixed;
  bottom: 0;
}

或者您可以使用Flex，然后将您的元素设置为align-self: flex-end

例如

.container {
  height: 150px;
  width: 150px;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
   border: 1px solid red;
}

.container div {
  -webkit-align-self: flex-end;
  align-self: flex-end
}

Fiddle

【讨论】：

谢谢！但不幸的是，您的第二个解决方案不起作用......“位置：固定”变体的问题是我无法使用位置属性，因为 HTML 渲染器尚未实现它。
这确实直接回答了您的问题（我的回答也是如此）。什么样的“HTML 渲染器”还没有实现position？听起来您的问题不应该被标记为html5 或css3，因为显然您的情况会阻止您以任何合理的方式使用它们。
我正在使用这个：htmlrenderer.codeplex.com。您基本上可以向 html 添加样式，但无法识别属性“位置”。这就是为什么我需要找到一个绕过它的解决方案。
@GreeceTom 啊哈！ “广泛的 HTML 4.01 和 CSS 2 级规范支持。”所以我对那些html5 和css3 标签是正确的。 :) 为了后代（并避免获得更多建议 CSS3 样式的答案，例如 display:flex），也许您应该编辑您的问题以仅具有 html 和 css 标签。而且由于该 html 渲染器包是为将 HTML 集成到常规应用程序窗口而设计的，因此不支持 position 也就不足为奇了。
我想你需要把你想要的 HTML 块放在底部，到一个单独的HtmlPanel（或HtmlLabel？）——然后使用常规的 .NET GUI 布局将其相对于您的其他内容进行定位的做法。