代码之家 › 专栏 › 技术社区 › Sandy Gifford

使DIV 100%滚动父级高度[重复]

overflow css3 css html

Sandy Gifford · 技术社区 · 6 年前

如果总数 内容高度 家长人数是10000人,但是 overflow: auto 元素是提供高度为700px时,如何强制 aside 要动态呈现为10000px的子元素相反默认的700px?当你开始滚动时,你可以看到白色的背景。 the Fiddle .

不能再添加任何元素( ::after 和 ::before 但是可以接受)。
这个 在一边 元素必须具有其内容滚动 main 元素的内容通过 #body 元素(否 position: fixed; )
这个 在一边 元素必须具有 background-color 从最上面的0像素拉伸到最下面(例如5000像素或10000像素)远 在下面 最初可见的褶皱。
这个 在一边 元素不能有自己的元素 overflow: auto; .
动态(对于知识较少的人)意味着我们可以不设置静态 height ,例如 height: 10000px 我们会的不知道渲染的高度。

在我的例子中,当你开始滚动绿色 背景色 结束,我想做 在一边 元素一直延伸到内容底部。

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

0 回复 | 直到 6 年前

Michael Benjamin 6 年前

除了绝对定位,这是不可能与CSS。您需要使用javascript。

问题是:

第一部分: `background-color`

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

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

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

根据规范:

14.2 The background

作者可以指定元素的背景(即元素的呈现表面)作为颜色或图像。关于 box model ,“背景” 指的是 content , padding 和 border 地区。

因此,CSS背景属性的设计目的是覆盖到元素边界的区域。它们不覆盖边缘区域。它们不会溢出。

第二部分: `overflow`

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

这个 溢出 属性仅适用于内容。 这与背景无关。

根据规范:

11.1.1 Overflow: the overflow property

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

有了这两个障碍,CSS在解决这个问题上没有用处(除了可能的黑客)。使背景色填充动态大小容器的整个长度的唯一方法是使用脚本。

Belder 7 年前

不确定这是否符合您的所有标准,但是如何 this 解决方案?只需将父DIV包装在容器中,并将overflow-y设置为auto-like,就可以做到这一点:

.container {
  overflow-y: auto;
}

John 7 年前

这是不我想要达到我想要的结果的方式 background-image 上 #body 在许多情况下,尽管我处理事情的方式可能是可以接受的,但这里是 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>

bhv 7 年前

* {
    border: 0;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    position: relative;
}

.container {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.main-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}

main {
    flex: 5;
}

aside {
    flex: 1;
}

header {
    min-height: 36px;
    background-color: yellowgreen;
    position: fixed;
    width: 100%;
    top: 0;
}

main {
    background-color: #cfc
}

aside {
    background-color: #afa;
}

footer {
    background-color: indigo;
    min-height: 36px;
    position: fixed;
    width: 100%;
    bottom: 0;
}

<div class="container">
		<header>header</header>

		<div class="main-content">
				<main>
					<article>
						<p>article</p>
						<div style="height: 10000px;">10,000px</div>
					</article>
				</main>
				<aside>
					aside
				</aside>
		</div>

		<footer>footer</footer>
		
	</div>

使DIV 100%滚动父级高度[重复]

第一部分: background-color

第二部分: overflow

第一部分: `background-color`

第二部分: `overflow`