使子元素使用父母总OVERFLOW高度的100% [英] Make child element use 100% of total OVERFLOW height of parent
问题描述
如果父级的总体内容高度为10,000px,但是 overflow:auto;
元素为呈现高度为700px如何强制抛开
子元素动态呈现为默认700px的10,000px 而不是?您可以在开始滚动小提琴时看到白色背景。
- 不能再添加元素(
:: after
和:: before $
到最底层(例如5,000px或10,000px)远远低于最初的可见折叠。
- 元素必须使用
main
元素的内容通过#body
元素(noposition:fixed;
)。 >
- <0 cpx c>元素必须从0px顶部延伸
background-color - 元素必须使用
- 抛开元素不能有自己的
overflow:auto;
。 - 动态(对于较少的知识)意味着我们可以而不是设置静态
高度
,例如height:10000px
因为我们不会 知道呈现的高度是多少。
在我的例子中,当你开始滚动绿色 除了绝对定位之外,这对于CSS来说是不可能的。您需要使用JavaScript。 这是问题: 您没有为内容元素定义高度( 背景颜色将会只覆盖元素的宽度和高度。你可以在你的演示中看到这个。一旦滚动开始,背景颜色结束。这是因为溢出区域超出了元素的宽度/高度区域。 从规范: 作者可以指定元素的背景(即其渲染 所以CSS背景属性被设计为覆盖一个区域元素。它们不会溢出。 这可以被认为是截断背景颜色的另一种解释,但是从上面的不同角度来看是不同的。 该属性指定块容器元素 有了这两个障碍阻碍,CSS在解决这个问题上是无用的(除了可能的黑客)。使背景颜色填充动态大小容器的整个高度的唯一方法是使用脚本。 If the total content height of the parent is 10,000px but the In my example the moment you begin to scroll the green
Barring absolute positioning, this is not possible with CSS. You'll need to use JavaScript. Here's the problem: You have no height defined for the content element ( This means that the height is content-driven. A background color will only cover the width and height of the element. You can see this in your demo. As soon as the scrolling begins, the background color ends. That's because the overflow area is outside the width / height area of the element. From the spec: Authors may specify the background of an element (i.e., its rendering
surface) as either a color or an image. In terms of the box
model, "background"
refers to the background of the So CSS background properties are designed to cover an area up to the borders of the element. They do not overflow. This can be considered another explanation for the truncation of the background color, but from a different perspective than above. The From the spec: 11.1.1 Overflow: the This property specifies whether content of a block container element
is clipped when it overflows the element's box.
With these two obstacles standing in the way, CSS is not useful in solving this problem (except for possible hacks). The only way to make a background color fill the entire height of a dynamically-sized container would be with a script. 这篇关于使子元素使用父母总OVERFLOW高度的100%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! background-color
结束的时候,我想把 / code>元素一直延伸到内容底部。
< ;? xml version =1.0encoding =UTF-8?><!DOCTYPE html>< html xmlns =http://www.w3.org/1999/xhtmlxml:lang = en>< head>< title> Overflow Flex Box Issue< / title>< style type =text / css> * {border:0;保证金:0; padding:0;} aside {background-color:#afa;次序:2; width:20%;} body {display:flex; flex-direction:column;身高:100%;}身体> 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;次序:1; width:80%;}#body {display:flex;次序:2; < / body>< div id =body><主要><文章>< p>< p>< p>文章< / p>< p>文章< / p>< div style =height:10000px;> 10,000px< / div>< / article>< / main>< aside>< p> ;&#60;旁边&#62;;只有可见区域的高度为100%,它< em>应该< / em> < / p>< / aside>< / div>< header>身体&#62;标题元素;元素2,order:1;。< / header>< footer> body&#62;页脚元素;元素3,order:3;。< / footer>< / body>< / html>
第一部分:
background-color
#body
$ b 这意味着高度是内容驱动的。
表面)为一个颜色或一个图像。根据框中的
模式,背景
指的是内容
, padding
和 border
区域。
第二部分:
溢出
溢出
属性仅适用于内容。与背景无关。
的内容是否在元素的框溢出时被剪切。
< blockquote>
overflow: auto;
element is rendered with a height of 700px how do I force the aside
child element to dynamically render as 10,000px instead of the default 700px? You can see the white background the moment you begin to scroll the Fiddle.
::after
and ::before
are acceptable though).aside
element must have it's content scroll with main
element's content via the #body
element (no position: fixed;
).aside
element must have it's background-color
stretch from the very top at 0px to the very bottom (e.g. 5,000px or 10,000px) far below the initial visible fold.aside
element must not have it's own overflow: auto;
.height
, e.g. height: 10000px
as we will not know what the rendered height will be.background-color
ends, I want to make the aside
element stretch all the way to the content bottom.<?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>
Part I:
background-color
#body
).
content
, padding
and border
areas.
Part II:
overflow
overflow
property only applies to content. It has nothing to do with backgrounds.
overflow
property