javascript - Css float:right 100% 高度，图像底部对齐

Question

float: right我在我的网站上使用 a 。我想让那个 div 100% 的窗口高度减去 10px 的边距。我希望高度随页面调整大小。

我还希望其中的图像位于“容器”的底部 - 10px 填充。

我已经尝试过调整所有内容，并且确信代码中的某些内容存在冲突，但我无法解决。

感谢您提前提出任何建议。

Answer 1

我建议你使用绝对定位而不是浮动，你可以通过设置例如top同时扩展元素bottom。

bottom如果您将其设置为，绝对定位也适用于图像10px（其偏移父级已经是正确的容器，因为position除了默认值之外的任何其他static元素都会使该元素成为偏移父级）。

快速示例：

/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }

jsFiddle 演示

​<strong>更新：以及更新的 jsFiddle以显示将另一个元素放入容器并将其定位到底部的示例。

#image { position: absolute; bottom: 10px; left: 20px;  }