Question

为什么带文字的滚动div会垂直延伸到容器之外？

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

我不确定在这里展示什么代码。这是一个div（右栏 - 它绕圈，这就是为什么它是正确的，而不是左侧），在100％高度的容器'columns'div内有100％高度，但前者超出后者。

感谢。

Answer 1

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

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

您可以使用calc：

来解决此问题

height: calc(100% - height_of_button_containerpx);

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

请注意：calc()为CSS3且为unsupported in really old browsers.

第二种：除高度外，还应用填充。你告诉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可让您灵活设置容器宽度和高度。如果容器就像＆＃34;网格＆＃34;，我会鼓励使用display: table。

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

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

3 个答案: