CSS: How to get background and border to overflow? - css

Question

In my web page I have top and bottom sections which are fixed with CSS, position: fixed;
Between the top and the bottom I have an absolutely positioned page element - a div - and this is where most of my content appears. When the content is too big for the page element, I want it to overflow on the y-axis. In this case, I want the scroll bars to appear on the very right of the screen, (not the page element), so I have overflow-y: scroll; on the body element. (See facebook for an example).
Now, this works fine except for the borders and background of the page element. The content which is initially within view has both border and background, but when I scroll down to the overflow area, it has neither.
I have tried setting the height of the page using absolute (bottom: 105px) and relative (height: 100%;) methods, but neither works. I also tried ending the content inside the page element with <p style="clear: both"></p>.
Any ideas? Thanks!

Answer 1

The problem is most likely the height: 100%; actually. When you the background-color is filled in, it fills it 100% of the way (visible area). The problem is that since the overflow goes past the 100%, the background-color doesn't stick.
Instead of using height:100%, put a min-height of whatever you want your absolutely positioned element to be. That way when the background-color fills it in, it fills the whole thing because the overflow is always going to continue to be above that minimum height.
EDIT: I realize a big block of words for an answer is annoying. More concisely:
You had:
.middle {height:100%;}
Get rid of that and change it to:
.middle {min-height:100%;}

Answer 2

I'm not quite sure what you are wanting with your borders. This fiddle has borders at the top and bottom of the content only with this code:
HTML
<div class="top">Top</div>
<div class="middle">
<div class="content"></div>
</div>
<div class="bottom">Bottom</div>
CSS
.top,
.bottom {
position: fixed;
height: 100px;
top: 0;
left: 0;
right: 0;
background-color: red;
z-index: 1;
}
.bottom {
bottom: 0;
top: auto;
background-color: blue;
}
.middle {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 100px;
}
.content {
width: 100%;
height: 1000px;
background-color: yellow;
border: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 100px;
}
This fiddle has borders constantly around it with this code (same html as above):
CSS
.top,
.bottom {
position: fixed;
height: 100px;
top: 0;
left: 0;
right: 0;
background-color: red;
border-bottom: 10px solid black;
z-index: 1;
}
.bottom {
bottom: 0;
top: auto;
background-color: blue;
border-top: 10px solid black;
border-bottom: 0;
}
.middle {
position: absolute;
top: 110px;
left: 0;
right: 0;
bottom: 110px;
}
.content {
width: 100%;
height: 1000px;
background-color: yellow;
border-right: 10px solid black;
border-left: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 110px;
}