In the following web page (jsfiddle), I want 10% of spaces in the top and bottom. But when div #b overflow, there is no space in the bottom inside the container. What is the problem?
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#a {
position: relative;
width: 300px;
height: 200px;
overflow: auto;
background: gray;
}
#b {
position: absolute;
top: 10%;
bottom: 10%;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
</body>
</html>
If you add a border to the
#belement,you will see the top and bottom 10% space: http://jsfiddle.net/audetwebdesign/r4GD8/1/
However, if the content does not fill up 80% of 200px of height, you will see a larger gap between the text and the bottom of the parent (gray background) container.
You are doing things right, but not visualizing the effect as you expected.
You may be trying to center the content vertically, but that is a different problem.
Panel with Scrolling of Overflow
If you want
#bto increase in height proportional to its content, and you want want to retain some white space at the top and the bottom, then you can try:When the
#bgets taller than 200px,#awill show a vertical scrolling bar.The
min-heightproperty on#bis not strictly necessary unless you are adding a background image or color to#b.You need to specify the lengths for the padding, using percentage values are based on the width of the parent (not the height as you might expect).
See demo at: http://jsfiddle.net/audetwebdesign/w9qTX/