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

Posted

技术标签:

【中文标题】使背景颜色延伸到溢出区域【英文标题】：Make background color extend into overflow area 【发布时间】：2018-01-11 19:34:26 【问题描述】：

如果父级的总 内容高度 为 10,000 像素，但 overflow: auto 元素被 渲染 高度为 700 像素，我该如何强制 aside 子级元素动态呈现为 10,000 像素 而不是 默认 700 像素？当你开始滚动the Fiddle时，你可以看到白色背景。

不能再添加任何元素（::after 和 ::before 是可以接受的）。 aside 元素的内容必须通过#body 元素与main 元素的内容一起滚动（不是position: fixed;）。 aside 元素必须有它的 background-color 从最顶部 0 像素处延伸到最底部（例如 5,000 像素或 10,000 像素）远低于初始可见折叠。 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>&#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>

【问题讨论】：

【参考方案1】：

实际上，有一个非常简单的解决方案，只使用 CSS 并且不触及标记。

display:table-cell 代表 aside 和 main 省略#body 上的显示弯曲

这是一个功能齐全的 sn-p：

<?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>&#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>

【讨论】：

【参考方案2】：

除非绝对定位，否则这在 CSS 中是不可能的。您需要使用 javascript。

问题来了：

第一部分：background-color

您没有为内容元素定义高度 (#body)。

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

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

来自规范：

14.2 The background

作者可以指定元素的背景（即其渲染 表面）作为颜色或图像。就box model而言，“背景” 指content、padding和border的背景 地区。

因此，CSS 背景属性旨在覆盖元素边界的区域。它们不覆盖边缘区域。它们不会溢出。

第二部分：overflow

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

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

来自规范：

11.1.1 Overflow: the overflow property

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

由于存在这两个障碍，CSS 无法解决这个问题（可能的黑客攻击除外）。使背景颜色填充动态大小容器的整个长度的唯一方法是使用脚本。

【讨论】：

【参考方案3】：

这不是我打算实现结果的方式，因为在许多情况下我想在#body 上设置background-image，尽管这可能是我处理事情的主观方式可以接受的，这是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>&#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>

【讨论】：

【参考方案4】：

不确定这是否符合您的所有标准，但this 解决方案怎么样？只需将父 div 包装在容器中并将溢出-y 设置为 auto 就可以了：

.container 
  overflow-y: auto;

【讨论】：

确切的效果，但是，不，可以不添加额外的元素，但我会看看我是否可以调整存在的元素...... 在 sceanrios 中按预期工作，您可以在其中添加包装 div @Belder

以上是关于使背景颜色延伸到溢出区域的主要内容，如果未能解决你的问题，请参考以下文章

使图表的背景在不同区域不同颜色

如何使 SwiftUI 列表行背景颜色扩展整个宽度，包括安全区域之外

R语言ggplot2可视化使图形的背景在不同区域有不同的颜色实战

除非我添加溢出，否则 CSS 背景颜色不会显示：隐藏？为啥？

如何用matlab来更改登记照的背景颜色

CSS 背景颜色不适用于溢出的 SVG 内容