使用相邻的固定大小div创建div填充空间

Question

我正在尝试将div对齐到容器的左下角：

绿色是里面的主体容器。黄色是标题div，里面是徽标和标题。

现在，我将徽标（橙色div）设置为{float:right; width: 30%}，因此内部图像的宽度不会超过div。

问题在于蓝色问题。我希望它与橙色（取决于图像）的高度相同，并填充我们剩余的空间。 （正如你在图片中看到的那样）。另外，我希望蓝色div（标题）的文本与左下角对齐。

我尝试了各种位置绝对，相对于父母/孩子并设置顶部和底部。使用固定高度工作，但div需要与图像div具有相同的高度。

任何帮助都将受到赞赏，因为我将了解更多关于CSS的信息。

编辑：图像的宽度取决于样板，并且图像的尺寸不固定。标题将包含格式为<h1>的css和图标的<span>。

EDIT2：我当前的代码：http://jsfiddle.net/QxK9U/

Answer 1

如果将图像div包装在标题div中，则标题div将具有相同的高度，除非它具有比图像div更多的内容。

<div class="header">
    <div class="title">
        <div class="image"><img src="http://placekitten.com/200/250"></div>
    </div>
</div>

http://jsfiddle.net/Gc5qz/1/

Answer 2

您是否尝试过此css属性

bottom:0
left:0

---

更新

   position: relative;