html - 当内部内容与底部对齐时如何显示滚动条？

Question

我有两个 div，“外部”和“内部”，如下所示:
http://jsfiddle.net/WVd9Q/2/

[HTML]

<div class="outer">
    <div class="inner">
        <p id="content">Lorem ipsum dolor sit amet...</p>
    </div>
</div>

[CSS]

    .outer {
        width:100%;
        height:100%;
        left:0;
        top:0;
        position:absolute;
        overflow-y:scroll;
        z-index: 100;
    }
  .inner {
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        width:100%;
        min-width:400px;
        max-width:800px;
        margin: auto;
    }

如您所见，外部覆盖了整个页面，内部与底部对齐。
但是当你点击[make it long]按钮​​使里面变长时，外面不显示滚动条。
如果我按预期将 .inner 中的 bottom:0 更改为 top:0，它会显示滚动条。

如何显示外部的滚动条与底部对齐的内部？

附加
好的，this fiddle是我想要的最终形式。谢谢!

[HTML]

<div class="outer">
    <div class="inner">
        <div class="content">
            <p id="text">Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
</div>

[CSS]

body {
    overflow-y:hidden;
}
.outer {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    z-index: 100;
}
.inner {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    max-height:100%;
    overflow-y:auto;
}
.content {
    min-width:400px;
    max-width:800px;
    margin: auto;
}

Answer 1

工作 fiddle here .

正如 Doxick 提到的，我所做的是从外部移除 overflow-y，为内部 div 设置高度，并向其添加 overflow-y:sroll。

.outer {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    z-index: 100;
}
.inner {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    overflow-y:scroll;
    max-height:100%;
    min-width:400px;
    max-width:800px;
    margin: auto;
}