Html 如何获得一个内部div来填充整个包装器div？

我有以下html代码：

<div class="outer ui-draggable" style="position: relative;">
  <div class="inner">Foo bar</div>
</div>

我希望内部div完全填充外部div-文本块应该是一个完整的100X150框

问题是这段代码没有产生预期的效果。外部div确实是正确的大小，但是内部div似乎只填充外部div顶部的一个小区域

---

我还尝试使用height:inherit和width:inherit来代替指定大小。

问题在于

显示：inline

样式。如果希望它像普通DIV一样工作，请保持它

display:block

。如果是

display:inline

，则其高度将仅与继承的行高相同。

可能是因为“垂直对齐样式”属性。这是无效的样式设置规则。它仅对

和

显示有效：表格单元格

基本上，内联DIV的作用类似于SPAN

.outer
{
    background-color: #F7F085;
    margin: 5px;
    height: 100px;
    width: 150px;
    text-align:center;
    vertical-align:text-bottom;
}
.outer .inner
{
    display:inline;
    vertical-align:middle;
    height: 100px;
    width: 150px;
}