css - 添加内容时CSS div高度溢出文档正文

Question

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

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

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

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

更新

我已经编辑了我的小提琴以更好地代表我的实际开发场景。新的小提琴在这里：jsfiddle.net/Nszjv 并且在 safari 中按预期工作，但是由于某种原因 firefox 不呈现滚动条....对此有什么想法吗？

Answer 1

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

#box1{
    display:table-cell;
}

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

    width:200px;    
}

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