Css浮动：右侧100％高度，图像对齐底部

Question

我正在使用我的website上的float: right。我想让这个div 100％的窗口高度减去10px的边距。我希望高度调整与页面。

我也希望它的图像坐在'容器'的底部减去10px的填充。

我试过调整一切，并且确定它在代码中的某些内容发生冲突，但我无法解决它。

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

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; }