html - 如何将一个可滚动的 div 元素完全包含在另一个元素中？

Question

我想要一个可滚动的 (overflow: auto) div 元素完全包含在另一个 div 中，即它应该只作为一个覆盖到父级。但是，我无法在 child (我想要的)内使用填充来完成这项工作。

参见 this fiddle举个我的问题的例子。

我怎样才能完成我所追求的(如果可能的话)？

HTML:

<div id="parent">
    <div id="child">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
    </div>
</div>

CSS:

#parent {
   border: 1px solid #666;
   height: 2.5em;
   padding: 0;
}

#child {
    margin: 0;
    padding: 8px 20px;
    overflow: auto;
    height: 100%;
}

编辑

请注意，由于技术原因排除在这种情况下，我决定使子元素可滚动而不是父元素:子元素需要完全覆盖父元素，但这会使父元素至少显示一个滚动条。

Answer 1

我相信这就是您想要的。您在错误的元素上设置了高度。我调整边框只是为了更容易看到发生了什么。

http://jsfiddle.net/QYG5g/4/