為什么帶有文本的滾動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的默認值。 閱讀更多