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

Question

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

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

我不确定要在此处显示什么代码。 这是一个div（右列，它绕圈，这就是为什么它正确，而不是左边）在容器“列” div中具有100％高度的原因，该div具有100％的高度，但是前者超出了后者。

谢谢。

Answer 1

两件事：给它100％的高度和填充。

第一个是问题，因为它上面有按钮，因此在不强制窗口滚动的情况下无法占据窗口高度的100％。

您可以使用calc来解决此问题：

height: calc(100% - height_of_button_containerpx);

注意 ：特别注意语法。 请注意，有插图中数字和单位没有空间， 但每个值和减号之间的空间。 这个很重要！

还要注意这一点 ： calc()是CSS3， 在真正的旧浏览器中不受支持。

---

第二： 除了高度以外，还使用填充。 您要告诉div在其100％高度周围有Qpx额外的空间，因此，由于高度不能大于100％，因此窗口必须滚动。

使用box-sizing可以很容易地解决此问题：

#myDiv
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Answer 2

使用ID menuBarLine计算div的高度。 接着

#columns .right {
position: relative;
float: right;
width: 30%;
height: 96%;//(total height of the parent container of #right div -height of the menuBarLine)
overflow-y: auto;
padding: 2%;
box-sizing: border-box;
-moz-box-sizing: border-box;
text-align: justify;
}

Answer 3

要修复扩展容器，请使用display: table 。 将css属性table设置为其子项的容器和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的默认值。 阅读更多