Jquery 将DIV内的DIV拉伸至100%高度？

我想将DIV中的DIV容器拉伸到100%的高度。我要拉伸的DIV容器中有一个图像

<img src="http://thisisatestforstack.com/image.png"/>

我还想在之后将图像垂直居中。我准备了一张照片，让我的愿望更加清晰：

这是我现在的代码：

<div id="master">
    <div id="text" style="width: 60%; float: left;">
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.<br/>
        This is an example.
    </div>

    <div id="image" style="width: 40%; float: left;">
        <img src="http://thisisatestforstack.com/image.png"/>
    </div>
</div>

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

这是一个例子。

尝试垂直对齐：中间对齐用于图像分割。

使用

flexbox

布局，您可以通过以下方式实现：

代码片段

#主控{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
}
#正文{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}
#形象{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}
.项目顶部{
宽度：60%；
浮动：左；
-webkit-align-self:flex-start；
-ms flex项目对齐：开始；
自我校准：灵活启动；
}

这是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

这就是一个例子。

vertical align（垂直对齐）：中间仅与桌子对齐。另外，请查看以下高度问题的答案：