Css float：右边100％高度，图像对齐底部

Question

我在website上使用了float: right。我想将窗口高度的100％减去10px边距。我希望高度随页面调整大小。

我还希望其中的图像位于'容器'的底部减去10px填充。

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

提前感谢您的任何建议。

Answer 1

我建议您使用absolute positioning代替浮动，您可以通过同时设置top和bottom来扩展元素。

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

快速举例：

/* 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 Demo

更新：以及updated jsFiddle以显示将另一个元素放入容器并将其放置在底部的示例。

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