Joh*_*ohn 10 html css overflow flexbox
如果父元素的总内容高度为 10,000 像素，但overflow: auto元素呈现的高度为 700aside像素，如何强制子元素动态呈现为 10,000 像素而不是默认的 700像素？当您开始滚动Fiddle 时，您可以看到白色背景。
::after和::before是可以接受的，虽然）。aside元素必须有它的与内容滚动main通过元素的内容#body元素（无position: fixed;）。aside元件必须具有它的background-color在0像素到最底部（例如5,000px或10,000px）远离最顶部拉伸下面的初始可见的折叠。aside元素不能有它自己的overflow: auto;.height，例如height: 10000px因为我们不知道渲染的高度是多少。在我的示例中，当您开始滚动绿色background-color末端时，我想让aside元素一直延伸到内容底部。
<?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>不确定这是否符合您的所有标准，但是这个解决方案怎么样？只需将父级 div 包装在容器中并将 Overflow-y 设置为 auto 即可，如下所示：
.container {
overflow-y: auto;
}
除了绝对定位，这在 CSS 中是不可能的。您需要使用 JavaScript。
这是问题所在：
background-color您没有为内容元素 ( #body)定义高度。
这意味着高度是内容驱动的。
背景色只会覆盖元素的宽度和高度。您可以在演示中看到这一点。一旦滚动开始，背景颜色就结束。那是因为溢出区域在元素的宽度/高度区域之外。
从规范：
作者可以将元素的背景（即其渲染表面）指定为颜色或图像。就盒子模型而言，“背景”指的是
content、padding和border区域的背景。
所以 CSS 背景属性被设计为覆盖元素边界的区域。它们不覆盖边距区域。它们不会溢出。
overflow这是截断背景颜色的另一个原因。
该overflow属性仅适用于内容。它与背景无关。
从规范：
此属性指定块容器元素的内容在元素的框溢出时是否被剪裁。
由于存在这两个障碍，CSS 无法解决这个问题（除了可能的 hack）。使背景颜色填充动态大小容器的整个长度的唯一方法是使用脚本。
| 归档时间： |
|
| 查看次数： |
11346 次 |
| 最近记录： |