css - 使 float div 成为使用最小高度的父级的 100% 高度，同时仍允许父级展开

Question

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

在我这里的例子中 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") }

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

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

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

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