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

Question

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

我还希望其中的图像位于“容器”的底部减去 10 像素的内边距。

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

提前感谢您的任何建议。

Answer 1

我建议你使用absolute positioning而不是浮动，你可以通过同时设置例如top和bottom来扩展元素。

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

快速示例：

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

​UPDATE：和updated jsFiddle 显示将另一个元素放入容器并将其定位到底部的示例。

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