Make background color extend into overflow area
If the total content height of the parent is 10,000px but the overflow: auto element is rendered with a height of 700px how do I force the aside child element to dynamically render as 10,000px instead of the default 700px? You can see the white background the moment you begin to scroll the Fiddle.
- May not add any more elements (
::afterand::beforeare acceptable though). - The
asideelement must have it's content scroll withmainelement's content via the#bodyelement (noposition: fixed;). - The
asideelement must have it'sbackground-colorstretch from the very top at 0px to the very bottom (e.g. 5,000px or 10,000px) far below the initial visible fold. - The
asideelement must not have it's ownoverflow: auto;. - Dynamic (for the lesser knowledged) implies we can not set a static
height, e.g.height: 10000pxas we will not know what the rendered height will be.
In my example the moment you begin to scroll the green background-color ends, I want to make the aside element stretch all the way to the content bottom.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Overflow Flex Box Issue</title>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
aside
{
background-color: #afa;
order: 2;
width: 20%;
}
body
{
display: flex;
flex-direction: column;
height: 100%;
}
body > header
{
align-self: stretch;
background-color: #faa;
flex: 0 1 auto;
min-height: 56px;
order: 1;
}
body > footer
{
align-self: auto;
background-color: #aaf;
flex: 0 1 auto;
min-height: 36px;
order: 2;
}
html {height: 100%;}
main
{
background-color: #cfc;
order: 1;
width: 80%;
}
#body
{
display: flex;
order: 2;
overflow: auto;
}
</style>
</head>
<body>
<div id="body">
<main>
<article>
<p>article</p>
<p>article</p>
<p>article</p>
<div style="height: 10000px;">10,000px</div>
</article>
</main>
<aside><p><aside>, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside>
</div>
<header>The body > header element; element 2, order: 1;.</header>
<footer>The body > footer element; element 3, order: 3;.</footer>
</body>
</html>Solution 1:
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:
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,paddingandborderareas.
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
overflowpropertyThis 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.
Solution 2:
Not sure if this meets all of your criteria, but how about this solution? Simply wrapping the parent div in a container and setting the overflow-y to auto like so should do the trick:
.container {
overflow-y: auto;
}