Make background color extend into overflow area

by

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.

More Related Contents:

  1. Flexbox affects overflow-wrap behavior
  2. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  3. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  4. How to place elements like this
  5. Flexbox code working on all browsers except Safari. Why?
  6. How to center a flex container but left-align flex items
  7. Left column and stacked right column using flexbox CSS [duplicate]
  8. flex property not working in IE
  9. Last margin / padding collapsing in flexbox / grid layout
  10. Equal width flex items even after they wrap
  11. How to center elements on the last row in CSS Grid?
  12. Change div order with CSS depending on device-width
  13. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  14. Force flex item to span full row width
  15. input / button elements not shrinking in a flex container
  16. Flexbox and Internet Explorer 11 (display:flex in ?)
  17. Removing margin from flex items when they wrap
  18. ‘position: sticky’ not working when ‘height’ is defined
  19. Calculator keypad layout with flexbox
  20. Flexbox column-reverse in Firefox, Edge and IE
  21. Flex item should align left, not center, when it wraps
  22. How to align flexbox columns left and right?
  23. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  24. Prevent a child element from overflowing its parent in flexbox [duplicate]
  25. Why isn’t position:sticky with left:0 working inside a scrollable container?
  26. Chrome does not expand flex parent according to children’s content [duplicate]
  27. Flexbox with fixed header and footer and scrollable content
  28. extra space when centering elements using flexbox
  29. What are the default values for justify-content & align content?
  30. Sizing flex items on the last row

Leave a Comment