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

Question

我有以下的html代码：

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

有了这个CSS：

.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; 
} 

我想内div来完全填充外层div - 文本块应该是一个完整的100X150箱。

问题是此代码不会产生所需的效果。外部div的确是正确的大小，但内部div似乎只填充外部div顶部的一个小区域。

我也尝试使用height：inherit和width：inherit而不是指定大小。

Answer 1

问题出在display:inline风格。如果你想它像一个正常的DIV行为，保持它display:block。如果它是display:inline它只会和继承的行高一样高。

Answer 2

可能是因为垂直对齐样式属性。这是一个无效的样式规则。它仅适用于<tr><td>和<div>带显示：表细胞