Javascript CSS全高在滚动框中不起作用

发布于08月28日

我已经被这个简单的问题困扰了一段时间.它可能是复制品，但我在网上找不到类似的问题.

我正在try 将绿色条的高度设置为100%(以便与红色的家长具有相同的高度).

如果有帮助的话，这里有一个代言人:https://codepen.io/tartie2/pen/NWYZpgj

以下是代码:

div {
  background-color:red;
  height:200px;
  width:300px;
  position: relative;
  overflow: auto;
}

div::after{
  content: '';
  position:absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width:10px;
  background-color: green;
}

<div>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
</div>

推荐答案

试试这个:

.wrapper {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: row;
}

.green-bar,
.content {
  height: 100%;
}

.green-bar {
  width: 10px;
  background-color: green;
}

.content {
  padding-left: 10px;
  background-color: red;
  width: 100%;
  position: relative;
  overflow: auto;
}

<div class="wrapper">
    <div class="green-bar"></div>
    <div class="content">
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
    </div>
  </div>

Javascript相关问答推荐

即使设置了父级的最大高度，固定位置的分区内容也不会滚动？

如何让\w token 在此RegEx中表现得不贪婪？

Javascript CSS全高在滚动框中不起作用

推荐答案

Javascript相关问答推荐

即使设置了父级的最大高度，固定位置的分区内容也不会滚动？

如何让\w token 在此RegEx中表现得不贪婪？

Vega中的模运算符

传递一个大对象以在Express布局中呈现

如何使用JavaScript将文本插入空div

成功完成Reducers后不更新状态

实现JS代码更改CSS元素

优化Google Sheet脚本以将下拉菜单和公式添加到多行

Chart.js-显示值应该在其中的引用区域

当用户点击保存按钮时，如何实现任务的更改？

如何将zoom 变换应用到我的d3力有向图？

JavaScript不重定向配置的PATH

MarkLogic-earch.suggest不返回任何值

如何 for each 输入动态设置输入变更值

面对代码中的错误作为前端与后端的集成

如果一个字符串前面有点、空格或无字符串，后面有空格、连字符或无字符串，则匹配正则表达式

与svg相反；S getPointAtLength(D)-我想要getLengthAtPoint(x，y)

如何组合Multer上传？

通过跳过某些元素的对象进行映射

不协调嵌入图片