css - 为什么我的带有文本的滚动 div 超出了它的容器？

Question

为什么我的带有文本的滚动 div 会垂直超出其容器？

http://www.blakearchive.org/blake/public/exhibits/test.html

我不确定要在此处显示什么代码。这是一个 div(右边的列——它绕着一圈，这就是为什么它是右边的，而不是左边的)在容器“列”div 中有 100% 高度，但前者超出了后者。

谢谢。

Answer 1

要修复扩展容器，请使用display: table。为容器设置一个 css 属性 table 并为它们的 child 设置一个 table-cell，如下所示:

#columns {
    display: table
}

#menuBarLine {
    display: table-cell
}

#galleria {
    display: table-cell
}

#right {
    display: table-cell;
    box-sizing: border-box
}

添加此 display 属性将解决您的问题。

请记住，只要您有拆分列，请尽可能多地使用 display: table 属性，因为 display: table 让您可以灵活地设置容器宽度和高度。如果容器类似于“网格”，我会鼓励使用 display: table。

box-sizing: border-box 改变了 width 和 height 的计算方式。现在，width 和 height 将包含容器的 padding。因此，通过使用 box-sizing: border-box，您几乎肯定会得到您想要的值。我认为这应该是 css 属性 width 和 height 的默认值。 READ MORE