使浮动 div 使用最小高度的父级的 100% 高度，同时仍允许父级扩展

Question

我正在尝试创建一个项目列表，其中列表中的每个项目基本上包含两列......左列一些文本，右列 2 按钮用于是/否。我希望右侧的两个按钮与文本垂直对齐。出于美学原因，我想要列表项的最小高度。我终于发现浮动 div 必须在绝对 div 内才能使 100% 高度起作用。现在的问题是我在原始相对 div 中有一个绝对 div，它不再扩展以容纳比最小高度更长的文本。我已经阅读了很多文章并尝试了很多不同的高度/相对/绝对/浮动/清除/溢出组合，但对我的情况没有任何效果。有解决办法吗？

在我的示例http://jsfiddle.net/THBFY/4/ 中，我需要红色框与蓝色框的高度相同，以便垂直对齐工作。

<div class="list_container">
  <div class="list_item">
    <div class="item_text">
        My text in this item.  This could be a variable length creating a div ranging from about 75-150px in height.  This is a lot of text to make it longer although I am not really saying anything here.  It is only to make the blue box taller than the red box.
    </div>
    <div class="item_buttons">
      <div class="buttons_inner">
        <div class="button button_yes">Y</div>
        <div class="button button_no">N</div>
      </div>
    </div>
  </div>
</div>

.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }

当我使用 position:absolute http://jsfiddle.net/THBFY/5/ 添加内部 div 时，问题是高度不再增加以显示所有文本。

<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }

但是，如果我现在将外部 div 的最小高度从 70 更改为 200 http://jsfiddle.net/THBFY/6/，您可以看到红色框上的 100% 高度实际上是有效的，所以我的问题是在第一种情况下没有绝对位置，我需要红色框来拉伸，或者在有绝对div的第二种情况下，我需要容器来拉伸。

Answer 1

HTML：

<div class="list_container">
  <div class="list_item">
    <div class="item_text">My text in this item.  This could be a variable length creating a div ranging from about 75-150px in height.  This is a lot of text to make it longer although I am not really saying anything here.  It is only to make the blue box taller than the red box.
    </div>
    <div class="item_buttons">
      <div class="buttons_inner">
        <div class="button button_yes">Y</div>
        <div class="button button_no">N</div>
      </div>
    </div>
  </div>
</div>

CSS：

.list_container { position: relative; width: 400px; }

.list_item {  border: #000000 solid 1px; display:table; }

.item_text { display:table-cell; width: 340px; background-color: #0066BB }

.item_buttons { display:table-cell; width: 50px; background: #FF0000; }

.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }

.button_yes { background-image: url("images/yes.gif"); }
.button_no { background-image: url("images/no.gif"); }

fiddle