Menu
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.
::after and ::before are acceptable though).aside element must have it's content scroll with main element's content via the #body element (no position: fixed;).aside element must have it's background-color stretch from the very top at 0px to the very bottom (e.g. 5,000px or 10,000px) far below the initial visible fold.aside element must not have it's own overflow: auto;.height, e.g. height: 10000px as 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>
837
First, in 'Style Mode' - locate 'Sizes and Values' > 'Site Width' and set it to 80% - this can be adjusted to your preference - it acts as margins on the left and right of your content. Next, I created the two div's, one to act as the background, the other to hold the content. I added this to my custom CSS:
On my Iphone the light grey background stretches way off screen on the right hand side. It was fine with the code you provided me before but then the search bar was gone. I wanted to achieve this effect using the 'Five' template -- so after a bunch of experimenting, I believe I've figured it out. This is what I did:
@cenk To wrap Squarespace content do like this, start one Code Block and type Then inserts normal Squarespace blocks, at the end insert another Code Block to close your divs: Bah, tried now, it isn’t working. var mytext = "<div id="Bio"><div id="BioWrapper">"; document.write (mytext);
Barring absolute positioning, this is not possible with CSS. You'll need to use JavaScript.
Here's the problem:
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.
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.
52
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
