使背景颜色延伸到溢出区域
使背景颜色延伸到溢出区域
如果父级的总内容高度为10,000px但overflow: auto元素的渲染高度为700px，我如何强制aside子元素动态渲染为10,000px 而不是默认的700px？您可以在开始滚动小提琴时看到白色背景。
可以不添加任何更多的元素（
::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>
函数式编程浏览 1250回答 3
3回答
-
慕侠2389804
除了绝对定位，这对CSS来说是不可能的。你需要使用JavaScript。这是问题所在：第一部分： background-color您没有为内容元素（#body）定义高度。这意味着高度是内容驱动的。背景颜色仅覆盖元素的宽度和高度。您可以在演示中看到这一点。滚动开始后，背景颜色结束。那是因为溢出区域在元素的宽度/高度区域之外。从规格：14.2背景作者可以将元素的背景（即，其渲染表面）指定为颜色或图像。在方面盒模型，“背景”指的背景content，padding和border 地区。因此，CSS背景属性旨在覆盖直到元素边界的区域。它们不包括边缘区域。他们不会溢出。第二部分： overflow这是截断背景颜色的另一个原因。该overflow属性仅适用于内容。它与背景无关。从规格：11.1.1溢出：overflow 属性此属性指定块容器元素的内容在溢出元素框时是否被剪切。由于这两个障碍阻碍了CSS，因此CSS无法解决这个问题（除了可能的黑客攻击）。使背景颜色填充动态大小容器的整个长度的唯一方法是使用脚本。 -
湖上湖
不确定这是否符合您的所有标准，但这个解决方案怎么样？简单地将父div包装在容器中并将overflow-y设置为auto就像这样应该可以做到：.container { overflow-y: auto;}
随时随地看视频慕课网APP
Html/CSS
Html5
CSS3