如果父级的总内容高度为10,000px，但overflow: auto元素呈现且高度为700px，我该如何强制{{ 1}}子元素动态呈现为默认700px的10,000px 而不是？您可以在开始滚动the Fiddle时看到白色背景。
aside和::after可以接受）。::before元素必须通过aside元素（无main）将其内容滚动到#body元素内容。position: fixed;元素必须让它aside从最顶层0px延伸到最底层（例如5,000px或10,000px）远以下最初的可见折叠。background-color元素不得拥有aside。overflow: auto;，例如height因为我们不知道渲染高度是多少。在我的示例中，当您开始滚动绿色height: 10000px时，我想让background-color元素一直延伸到内容底部。
aside
答案 0 :(得分：3)
除了绝对定位，这对CSS来说是不可能的。您需要使用JavaScript。
问题在于：
background-color 您没有为内容元素（#body）定义高度。
这意味着高度是内容驱动的。
背景颜色仅覆盖元素的宽度和高度。您可以在演示中看到这一点。滚动开始后，背景颜色结束。那是因为溢出区域在元素的宽度/高度区域之外。
来自规范：
作者可以指定元素的背景（即其渲染） 表面）作为颜色或图像。关于box model，＆＃34;背景＆＃34; 是指
content，padding和border的背景 领域
因此，CSS背景属性旨在覆盖直到元素边界的区域。它们不包括边缘区域。它们不会溢出。
overflow 这是截断背景颜色的另一个原因。
overflow属性仅适用于内容。它与背景无关。
来自规范：
11.1.1 Overflow: the
overflowproperty此属性指定块容器元素的内容 当它溢出元素框时被剪裁。
由于阻碍了这两个障碍，CSS在解决这个问题上没有用（除了可能的黑客攻击）。将背景颜色填充到动态大小容器的整个长度的唯一方法是使用脚本。
答案 1 :(得分：0)
不确定这是否符合您的所有条件，但this解决方案如何？简单地将父div包装在一个容器中并将overflow-y设置为auto就像这样做：
.container {
overflow-y: auto;
}
答案 2 :(得分：0)
这是不我打算实现结果的方式，因为在许多情况下我想在background-image上设置#body，尽管这可能是可接受的我处理的事情，这里是Fiddle。我确信这个问题将在未来的某个时候得到解决。
#body
{
background-image: linear-gradient(to right, #cfc 0%, #cfc 79%, #afa calc(79% + 4px), #afa 100%);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Overflow Flexbox Issue</title>
<style type="text/css">
* {border: 0; margin: 0; padding: 0; scroll-behavior: smooth;}
aside
{
background-color: ;
order: 2;
width: 20%;
}
body
{
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
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
{
order: 1;
width: 80%;
}
#body
{
background-image: linear-gradient(to right, #cfc 0%, #cfc 79%, #afa calc(79% + 4px), #afa 100%);
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>
答案 3 :(得分：0)
* {
border: 0;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
position: relative;
}
.container {
display: flex;
flex-direction: column;
overflow: auto;
}
.main-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow: auto;
}
main {
flex: 5;
}
aside {
flex: 1;
}
header {
min-height: 36px;
background-color: yellowgreen;
position: fixed;
width: 100%;
top: 0;
}
main {
background-color: #cfc
}
aside {
background-color: #afa;
}
footer {
background-color: indigo;
min-height: 36px;
position: fixed;
width: 100%;
bottom: 0;
}<div class="container">
<header>header</header>
<div class="main-content">
<main>
<article>
<p>article</p>
<div style="height: 10000px;">10,000px</div>
</article>
</main>
<aside>
aside
</aside>
</div>
<footer>footer</footer>
</div>
答案 4 :(得分：0)
实际上，有一个非常简单的解决方案，仅使用CSS而不涉及标记。
display:table-cell代表aside和main #body 这是功能齐全的代码段：
<?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%;
display: table-cell;
}
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%;
display: table-cell;
}
#body
{
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>