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

Question

Why does my scrolling div with text extend beyond its container vertically?

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

I'm not sure what code to show here. That is a div (right column--it circles around, that's why it's right, not left) with 100% height inside a container 'columns' div with 100% height, but former is extending beyond the latter.

Thanks.

Answer 1

Two things: You are giving it 100% height and padding.

The first is an issue because there are buttons above it, and therefore it cannot occupy 100% of the height of the window without forcing the window to scroll.

You can fix this by using calc:

height: calc(100% - height_of_button_containerpx);

Note : pay particular attention to the syntax. Note that there is no space inbetween numbers and units, but there is a space between each value and the minus sign. This is important!

Note this too : calc() is CSS3 and is unsupported in really old browsers.

---

The second: padding is applied in addition to height. You are telling the div to have Qpx additional space surrounding its 100% height, and so, since the height cannot be greater than 100%, the window must scroll.

This can be fixed quite easily with box-sizing:

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

Answer 2

calculate the height of the div with ID menuBarLine. and then

#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

To fix the extended container, use display: table . Set a css property table to the container and table-cell for their children, as follow:

#columns {
    display: table
}

#menuBarLine {
    display: table-cell
}

#galleria {
    display: table-cell
}

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

adding this display property will fix your problem.

just keep in mind that anytime you have a split column, use display: table property as much as possible because display: table gives you flexibility in setting up the container width and height. If the container is like "grids", I will encourage to use display: table .

box-sizing: border-box changes the way width and height calculate. Now, width and height will include the padding of the container. Therefore, by using box-sizing: border-box , you will almost certainly get the value that you want. I think this should be the default value of the css property width and height . READ MORE