使背景颜色延伸到溢出区域 [英] Make background color extend into overflow area
问题描述
如果父级的总内容高度为10,000px，但>
- 不得添加更多元素（
:: after和:: before元素必须让它的内容以- 不在
main元素的内容通过#body元素（noposition：fixed;）。 >
- <0 c $ c>在元素的顶部必须有0 xpx的
background-color到最底层（例如5,000px或10,000px）远远低于最初的可见折叠。 - 抛开元素不能有自己的
overflow：auto;。 - 动态（对于较少的知识）意味着我们可以而不是设置静态
高度，例如height：10000px因为我们不会 知道呈现的高度是多少。
在我的例子中，当你开始滚动绿色 background-color 结束时，我想把放在一边元素一直延伸到内容底部。
$ b
<？xml version =1.0encoding =UTF-8？><！DOCTYPE html>< html xmlns =http://www.w3.org/1999/xhtmlxml：lang = en>< head>< title> Overflow Flex Box Issue< / title>< style type =text / css> * {border：0;保证金：0; padding：0;} aside {background-color：#afa;次序：2; width：20％;} body {display：flex; flex-direction：列;身高：100％;}身体> header {align-self：stretch; background-color：#faa; flex：0 1 auto; min-height：56px; order：1;} body>页脚{align-self：auto; background-color：#aaf; flex：0 1 auto; min-height：36px; order：2;} html {height：100％;} main {background-color：#cfc;次序：1; width：80％;}＃body {display：flex;次序：2; article< / head>< body>< / body>< div id =body>< p>< / p>< p><文章< / p>< p>文章< / p>< div style =height：10000px;> 10,000px< / div>< / article>< / main>< aside>< p> ;&＃60;旁边&＃62;;只有可见区域的高度为100％，它< em>应该< / em> < / p>< / aside>< / div>< header>身体&＃62;标题元素;元素2，order：1;。< / header>< footer> body&＃62;页脚元素;元素3，order：3;。< / footer>< / body>< / html>
除了绝对定位之外，这对于CSS来说是不可能的。
第一部分： background-color
您没有为内容元素定义高度（ #body ）。
这意味着高度是内容驱动的。
背景颜色会只覆盖元素的宽度和高度。您可以在演示中看到此内容。一旦滚动开始，背景颜色结束。这是因为溢出区域超出了元素的宽度/高度区域。
从规范：
作者可以将元素的背景（即其渲染
曲面）指定为一种颜色或图像。根据框中的
模型，背景
指的是内容，padding和border
区域。
因此，CSS背景属性设计为覆盖直至元素。它们不会溢出。
第二部分：溢出
这是截断背景颜色的另一个原因。
溢出属性仅适用于内容。它与背景无关。
从规范：
此属性指定块容器元素
的内容是否在元素框溢出时被剪切。
有了这两个障碍阻碍，CSS在解决这个问题时没有用（除了可能的黑客）。使背景颜色填充动态大小容器的整个长度的唯一方法是使用脚本。
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>
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 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.
这篇关于使背景颜色延伸到溢出区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
