让背景颜色延伸到溢出区域

2024-01-28

如果总计内容高度父级的大小是 10,000px 但overflow: auto元素是rendered高度为 700px 我如何强制aside子元素动态渲染为 10,000pxinstead默认 700px？当您开始滚动时，您可以看到白色背景小提琴 https://jsfiddle.net/4m1L2tLh/.

不得添加更多元素（::after and ::before虽然是可以接受的）。
The aside元素的内容必须滚动main元素的内容通过#body元素（无position: fixed;).
The aside元素必须有它的background-color从最顶部 0 像素处拉伸到最底部（例如 5,000 像素或 10,000 像素）below最初可见的折叠。
The aside元素不能有自己的overflow: auto;.
动态（对于知识较少的人来说）意味着我们可以not设置静态height, e.g. height: 10000px正如我们所愿not知道渲染的高度是多少。

在我的示例中，当您开始滚动绿色时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>&#60;aside&#62;, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside>
</div>

<header>The body &#62; header element; element 2, order: 1;.</header>
<footer>The body &#62; footer element; element 3, order: 3;.</footer>

</body>
</html>

除非绝对定位，否则这对于 CSS 来说是不可能的。您需要使用 JavaScript。

问题是这样的：

Part I: `background-color`

您没有为内容元素定义高度（#body).

这意味着高度是内容驱动的。

背景颜色仅覆盖元素的宽度和高度。您可以在演示中看到这一点。一旦滚动开始，背景颜色就结束。这是因为溢出区域位于元素的宽度/高度区域之外。

从规格来看：

14.2 背景 https://www.w3.org/TR/CSS22/colors.html#background

作者可以指定元素的背景（即其渲染表面）作为颜色或图像。就盒子模型 https://www.w3.org/TR/CSS22/box.html#box-model， “背景” 指的是背景content, padding and border地区。

因此 CSS 背景属性被设计为覆盖直到元素边框的区域。它们不覆盖边缘区域。它们不会溢出。

第二部分：`overflow`

这是背景颜色被截断的另一个原因。

The overflow属性仅适用于内容。这与背景无关。

从规格来看：

11.1.1 溢出：overflow财产 https://www.w3.org/TR/CSS22/visufx.html#overflow

该属性指定块容器元素的内容是否当它溢出元素的框时被剪裁。

由于存在这两个障碍，CSS 对于解决这个问题没有什么用处（除了可能的 hack）。使背景颜色填充动态大小容器的整个长度的唯一方法是使用脚本。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

Overflow