如何让内部div填满整个包裹div？

Question

我有以下的html代码：

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

使用以下CSS： ```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而不是指定大小。

- ripper234

Answer 1

问题出在display:inline样式上。如果你希望它像普通的DIV一样运行，请将其保持为display:block。如果是display:inline，它的高度只会与继承的行高一样高。

- Robusto

---

基本上，内联 DIV 的作用类似于 SPAN。 - John Conde

Answer 2

可能是因为 vertical-align 样式属性。这是一条无效的样式规则，只适用于 <tr>、<td> 和带有 display:table-cell 的 <div>。

- Kasturi