使用相邻的固定大小的 div 使 div 填充空间答案

【问题标题】：Making div fill space with a adjacent fixed size div使用相邻的固定大小的 div 使 div 填充空间
【发布时间】：2012-10-20 03:44:28
【问题描述】：

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

绿色是里面的主体容器。黄色是header div，里面是logo和title。

现在，我得到了{float:right; width: 30%}的logo（橙色div），因此里面的图片宽度不会超过div。

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

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

任何帮助将不胜感激，因为我将了解更多有关 css 的信息。

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

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

【问题讨论】：

可能重复：stackoverflow.com/questions/5581799/…
有什么理由不能只固定高度吗？我假设你会知道你的标志的尺寸。我看不出当网站缩小时如何浮动 div 并将其设置为百分比宽度将包含徽标。使用固定高度，这应该是您所追求的吗？ jsfiddle.net/VtxWj/1

标签： html css

【解决方案1】：

如果您将图像 div 包裹在标题 div 中，那么标题 div 将具有相同的高度，除非它的内容比图像 div 多。

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

【讨论】：

我也尝试过这种方法，但任何额外的文本都会环绕 div。因此，如果我将任何内容放在图像之后的标题 div 中，它只会将换行扩展到下一行。 (jsfiddle.net/Gc5qz/5)

【解决方案2】：

你试过这个css属性吗

bottom:0
left:0

更新：

   position: relative;

【讨论】：