html - 滚动固定高度 div 的底部填充在 Firefox 中被忽略

Question

我有一个具有固定高度和填充属性的 div。我将 overflow 设置为 auto 让浏览器添加滚动条。我希望能够向下滚动直到整个底部填充可见，但它被完全截断了。

Here's a fiddle

CSS:

#content {
    padding: 40px;
    width: 250px;
    background-color: #ccc;
    overflow: auto;
}

HTML:

<div id="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

编辑:我发现它只在 Firefox(对我来说是 29.0.1)上表现不正常

Answer 1

您可以使用边距而不是填充，将文本包裹在段落标记中并更改宽度以适应差异。 See here

#content, #content2 {
   width: 330px;
   background-color: #ccc;
   overflow: auto;
}

#content {
   height: 200px;
   float:left;
}
p {
   margin: 40px;
}