CSS - 将子 div 拉伸到其溢出的父 div 的全高 [英] CSS - Stretch a child div to the full height of its parent that is overflowed

问题描述

我有一个溢出的 div(容器).它包含一个子层(层)，它应该填充其父层的所有可用高度和宽度，包括隐藏部分.在实际应用中，layer 是一个半透明的 div，它与 container 内的所有元素重叠，以防止与它们交互.它还要求容器可滚动.

.body{高度:200px；溢出-y:自动；}.容器{位置:相对；宽度:200px；高度:300px；溢出-y:自动；}.层{位置:绝对；顶部:0;宽度:继承；高度:继承；背景:#aaccff99；}

<div class="容器"><div class="layer"></div>与流行的看法相反，Lorem Ipsum 不仅仅是随机文本.它源于公元前 45 年的一段古典拉丁文学，已有 2000 多年的历史.弗吉尼亚州汉普登-悉尼学院的拉丁语教授理查德麦克林托克从 Lorem Ipsum 的一篇文章中查找了一个较为晦涩的拉丁词 consectetur，并通过在古典文学中对该词的引用，发现了无可置疑的来源.Lorem Ipsum 来自西塞罗写于公元前 45 年的de Finibus Bonorum et Malorum"(善与恶的极端)的 1.10.32 和 1.10.33 节.这本书是关于伦理学理论的论文，在文艺复兴时期非常流行.Lorem Ipsum 的第一行Lorem ipsum dolor sat amet.."来自第 1.10.32 节中的一行.自 1500 年代以来使用的 Lorem Ipsum 的标准块在下面为感兴趣的人复制.西塞罗的de Finibus Bonorum et Malorum"中的第 1.10.32 和 1.10.33 节也以其完全原始的形式复制，并附有 H. Rackham 1914 年翻译的英文版本.

如您所见，图层仅在可见区域与其父级重叠.如何仅使用 CSS 填充整个父区域?提前致谢.

解决方案

正如我所见，在您的情况下需要创建另一个类并包装容器.将 .container 中的所有样式复制到 .wrapper 并放入 .container set min-height: 100%>.最后拉伸 .layer 添加 bottom: 0.

.body {高度:200px；溢出-y:自动；}/* 新类 */.包装{宽度:200px；高度:300px；溢出-y:自动；}.容器 {位置:相对；宽度:继承；/* 改变了 */最小高度:100%；/* 新队 *//* 高度:300px;*//* 溢出-y: 自动;*/}.层 {位置:绝对；顶部:0；底部:0；/* 新队 */宽度:继承；/* 高度:继承；*/背景:#aaccff99；}

 
<div class="wrapper"><div class="容器"><div class="layer"></div>与流行的看法相反，Lorem Ipsum 不仅仅是随机文本.它起源于一块公元前 45 年的古典拉丁文学，使其已有 2000 多年的历史.理查德弗吉尼亚州汉普登-悉尼学院的拉丁语教授麦克林托克查找了其中一个更晦涩的拉丁词 consectetur，来自 Lorem Ipsum 段落，并通过在古典文学中引用这个词，发现了无可置疑的来源.逻辑推理来自de Finibus Bonorum et Malorum"(The Extremes善恶)由西塞罗，写于公元前 45 年.这本书是关于理论的论文道德，在文艺复兴时期非常流行.Lorem Ipsum 的第一行，Lorem ipsumdolor sat amet.."，来自第 1.10.32 节中的一行.Lorem Ipsum 的标准块自 1500 年代以来使用的内容在下面为感兴趣的人复制.第 1.10.32 节和西塞罗 (Cicero) 的de Finibus Bonorum et Malorum"中的 1.10.33 也按其原样复制原始形式，附有 H. Rackham 1914 年翻译的英文版本.

I have a div (container) that is overflowed. It contains a child (layer) that should fill all the available height and width of its parent, including the hidden part. In a real application, the layer is a semi-transparent div that overlaps all the elements inside the container to prevent interaction with them. It also requires the container to be scrollable.

.body{
 height: 200px; 
 overflow-y: auto;  
}
.container{
  position: relative;  
  width: 200px;
  height: 300px;  
  overflow-y: auto;  
}
.layer{
  position: absolute;
  top:0;
  width: inherit;
  height: inherit;
  background: #aaccff99;     
}

<div class="body">
<div class="container">
<div class="layer"></div>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
</div>

As you can see, the layer overlaps its parent only in the visible area. How do I make it fill the entire parent area using only CSS? Thank you in advance.

解决方案

As i can see, in your case needs to create another class and wraping the container. Copy all styles from the .container to the .wrapper and into the .container set min-height: 100%. Finally to stretch the .layer add bottom: 0.

.body {
  height: 200px;
  overflow-y: auto;
}
/* New class */
.wrapper {
  width: 200px;
  height: 300px;
  overflow-y: auto;
}
.container {
  position: relative;
  width: inherit; /* changed */ 
  min-height: 100%; /* New line */
  /* height: 300px; */
  /* overflow-y: auto; */
}
.layer {
  position: absolute;
  top: 0;
  bottom: 0; /* New line */
  width: inherit;
  /* height: inherit; */
  background: #aaccff99;
}

    <div class="body">
      <div class="wrapper">
        <div class="container">
          <div class="layer"></div>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
          of classical Latin literature from 45 BC, making it over 2000 years old. Richard
          McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the
          more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the
          cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
          comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
          of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of
          ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
          dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum
          used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
          1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact
          original form, accompanied by English versions from the 1914 translation by H. Rackham.
        </div>
      </div>
    </div>

这篇关于CSS - 将子 div 拉伸到其溢出的父 div 的全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！