Barring absolute positioning, this is not possible with CSS. You'll need to use JavaScript.
Here's the problem:
Part I: background-color
You have no height defined for the content element (#body).
This means that the height is content-driven.
A background color will only cover the width and height of the element. You can see this in your demo. As soon as the scrolling begins, the background color ends. That's because the overflow area is outside the width / height area of the element.
From the spec:
14.2 The
background
Authors may specify the background of an element (i.e., its rendering
surface) as either a color or an image. In terms of the box
model, "background"
refers to the background of the content, padding and border
areas.
So CSS background properties are designed to cover an area up to the borders of the element. They do not cover the margin area. They do not overflow.
Part II: overflow
This is another reason for the truncated background color.
The overflow property only applies to content. It has nothing to do with backgrounds.
From the spec:
11.1.1 Overflow: the overflow
property
This property specifies whether content of a block container element
is clipped when it overflows the element's box.
With these two obstacles standing in the way, CSS is not useful in solving this problem (except for possible hacks). The only way to make a background color fill the entire length of a dynamically-sized container would be with a script.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
