使背景颜色延伸到溢出区域如果父级的总内容高度为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>
3 回答
慕侠2389804
第一部分：
第二部分：
TA贡献1719条经验 获得超6个赞
除了绝对定位，这对CSS来说是不可能的。你需要使用JavaScript。
这是问题所在：
第一部分： background-color
您没有为内容元素（#body）定义高度。
这意味着高度是内容驱动的。
背景颜色仅覆盖元素的宽度和高度。您可以在演示中看到这一点。滚动开始后，背景颜色结束。那是因为溢出区域在元素的宽度/高度区域之外。
从规格：
作者可以将元素的背景（即，其渲染表面）指定为颜色或图像。在方面盒模型，“背景”指的背景
content，padding和border地区。
因此，CSS背景属性旨在覆盖直到元素边界的区域。它们不包括边缘区域。他们不会溢出。
第二部分： overflow
这是截断背景颜色的另一个原因。
该overflow属性仅适用于内容。它与背景无关。
从规格：
此属性指定块容器元素的内容在溢出元素框时是否被剪切。
由于这两个障碍阻碍了CSS，因此CSS无法解决这个问题（除了可能的黑客攻击）。使背景颜色填充动态大小容器的整个长度的唯一方法是使用脚本。
- 3 回答
- 0 关注
- 1239 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消