对于父节点:

display: flex;

您应该添加一些前缀http://css-tricks.com/using-flexbox/

编辑: 唯一的缺点是IE和往常一样，IE9不支持flex。 http://caniuse.com/flexbox

编辑2: 正如@toddsby所指出的，align items是针对父元素的，它的默认值实际上是stretch。如果你想要不同的child值，有align-self属性。

编辑3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

#outer height基于它的内容，#inner height基于它的内容，这两个元素都是绝对定位的。

更多细节可以在css height属性的规范中找到，但本质上，如果#outer的高度是自动的，#inner必须忽略#outer height，除非#outer是绝对定位的。那么#inner height将为0，除非#inner本身的位置是绝对的。

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

然而……通过绝对定位#inner，浮动设置将被忽略，所以你需要明确地为#inner选择一个宽度，并在#outer中添加填充来伪造我怀疑你想要的文本包装。例如，下面，#outer的填充是#inner的宽度+3。方便的是(因为整个重点是让#inner高度为100%)，没有必要在#inner下面换行文本，所以这看起来就像#inner被浮动了一样。

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

我删除了我之前的答案，因为它基于太多关于你的目标的错误假设。

为了解决你的问题，我杀鸡儆猴。

你必须做一个包装，浮动它，然后定位你的div，给它100%的高度。

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

说明:.right div是绝对定位的。这意味着它的宽度和高度，以及顶部和左侧的位置将基于第一个父div绝对或相对定位仅当宽度或高度属性显式声明在CSS中;如果没有显式声明，这些属性将基于父容器(.right-wrapper)进行计算。

因此，DIV的100%高度将基于.container的最终高度计算，而.right position的最终位置将基于父容器计算。

对于父节点:

display: flex;

您应该添加一些前缀http://css-tricks.com/using-flexbox/

编辑: 唯一的缺点是IE和往常一样，IE9不支持flex。 http://caniuse.com/flexbox

编辑2: 正如@toddsby所指出的，align items是针对父元素的，它的默认值实际上是stretch。如果你想要不同的child值，有align-self属性。

编辑3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

下面是一种更简单的实现方法:

设置三个元素的容器(#outer) display: table 并设置元素本身(#inner) display: table-cell 移除浮子。 成功。

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

感谢@Itay在浮动div, 100%高度

实际上，只要父元素处于定位状态，您就可以将子元素的高度设置为100%。也就是说，如果你不希望父节点被完全定位。让我进一步解释:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>