添加内容时，CSS div height会溢出文档正文

Question

我有一个#container div，设置为文档正文的height:100%; width:100%;。 #container内的div#box2设置为height:100%; width:200px;。当我向div#box2添加大量内容时，div高度溢出文档正文并显示滚动条。

如何div#box2 100% #container（以及100%文档正文）的高度，并且在添加内容时不会溢出文档滚动条？

看到这个小提琴：http://jsfiddle.net/aDdTe/

基本上，div#box2应该是滚动条，而不是文档正文。

更新

我编辑了我的小提琴，以更好地代表我的实际开发场景。新的小提琴就在这里：jsfiddle.net/Nszjv并且在safari中正如预期的那样工作但是firefox由于某种原因没有渲染滚动条....有什么想法吗？

Answer 1

您需要在css中使用overflow属性。

#box1{
    display:table-cell;
}

#box2{
    overflow:scroll;
    display:block;
    height:500px;

    width:200px;    
}

以下是jsFiddle上的代码： http://jsfiddle.net/gDKKr/