2023年5月18日 03:27:55go评论64阅读模式

英文:

Child element grow to height of overflow

问题

以下是翻译好的内容：

考虑以下情况。我有一个溢出自动的 div，其内容超出了其高度。然后，我有一个绝对定位的 div（红色背景），我希望它能够延伸到可滚动的 div 的整个高度。换句话说，我希望它延伸到文本停止的底部，但现在它只停在最初可见文本的底部。换句话说，如何使红色 div（.b）延伸到滚动距离的底部。是否有办法可以使用CSS来实现这一点？

理想的解决方案将仅使用CSS，而不依赖于重构HTML布局。

英文:

Consider the following. I have a overflow auto div whose content outgrows its height. I then have an absolute position div (red background) that I would like to run the entire height of the scrollable div. In other words I want it to extent to the bottom of where the text stops, but right now it stops at the bottom the initially-visible text only. In other words how can the red div (.b) extend to the bottom of the scrolling distance. Any way I can do this with CSS?

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  height: 100%;
  position: absolute; 
  top: 0;
  width: 10px;
  background: red;
}

&lt;div class=&quot;a&quot;&gt;
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  &lt;div class=&quot;b&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

Ideal solution will be CSS-only and not rely on refactoring the HTML layout.

答案1

得分: 1

以下是您提供的内容的翻译：

一种可能的方法是使用网格并设置网格行，如下所示的示例，现在无需重构。

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.b {
  position: absolute;
  grid-row: 1/1;
  height: 100%;
  width: 10px;
  background: red;
}

当然，如果您的div中不仅仅包含"test test test"，而是包含其他HTML元素的实际内容，那么这是一个不好的主意，因为这将破坏网格。更"安全"的解决方案需要添加一个包装div（在问题被修改之前发布的原始解决方案）。

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.t {
  grid-row: 1/1;
  grid-column: 1/1;
}

.b {
  grid-row: 1/1;
  grid-column: 1/1;
  height: 100%;
  width: 10px;
  background: red;
}

希望这些翻译对您有所帮助。

英文:

One possible way is with a grid and setting grid-row, see example below, now without refactoring

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.b {
  position: absolute;
  grid-row: 1/1;
  height: 100%;
  width: 10px;
  background: red;
}

&lt;div class=&quot;a&quot;&gt;
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test
  &lt;div class=&quot;b&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

Of cause, this is a bad idea if you dont just have "test test test" in your div, but actual content with other html elements, which will then break the grid. The "secure" solution requires adding one wrapper div (original solution posted, before question was altered)

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.t {
  grid-row: 1/1;
  grid-column: 1/1;
}

.b {
  grid-row: 1/1;
  grid-column: 1/1;
  height: 100%;
  width: 10px;
  background: red;
}

&lt;div class=&quot;a&quot;&gt;
  &lt;div class=&quot;t&quot;&gt;
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test
  &lt;/div&gt;
  &lt;div class=&quot;b&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

答案2

得分: 1

The problem with your current structure is that the height of a is fixed at 80vh and the height of b is 100% of a, which means also 80vh.

如果您愿意稍微更改HTML，您可以通过允许a的高度为自动（默认）并将a包装在一个具有固定高度和溢出滚动的容器元素中来解决此问题。这样，a的高度将是内容的完整高度，b的高度也将是内容的完整高度。

这是一个示例：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
.container {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.a {
  position: relative;
}

.b {
  height: 100%;
  position: absolute;
  top: 0;
  width: 10px;
  background: red;
}

<!-- language: lang-html -->
<div class="container">
  <div class="a">
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    <div class="b"></div>
  </div>
</div>

<!-- end snippet -->

英文:

The problem with your current structure is that the height of a is fixed at 80vh and the height of b is 100% of a, which means also 80vh.

If you are open to changing the HTML a bit, you can fix this by allowing the height of a to be auto (default) and instead wrapping a in a container element that has a fixed height with overflow scroll. This way the height of a will be the full height of the content and the height of b will also be the full height of the content.

Here's an example:

.container {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.a {
  position: relative;
}

.b {
  height: 100%;
  position: absolute;
  top: 0;
  width: 10px;
  background: red;
}

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;a&quot;&gt;
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    &lt;div class=&quot;b&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

答案3

得分: 0

给你的 div 添加 min-height:100% 并设置 height:auto。这将使你的颜色延伸到完整的高度，同时随着文本超过100%的高度而增长。

英文:

Add min-height:100% to your div and set height:auto. This will stretch your color to full hieght, but also grow as your text grows past 100% height.

答案4

得分: 0

An idea with sticky position but it only works if you know the value of height because you need it for margin-top

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  height: 100%;
  margin-top: -80vh; /* you need the opposite of height here */
  position: sticky; 
  bottom: 0;
  width: 10px;
  background: red;
}

<div class="a">
  test test test... (and so on)
  <div class="b"></div>
</div>

英文:

An idea with sticky position but it only works if you know the value of height because you need it for margin-top

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  height: 100%;
  margin-top: -80vh; /* you need the opposite of height here */
  position: sticky; 
  bottom: 0;
  width: 10px;
  background: red;
}

&lt;div class=&quot;a&quot;&gt;
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  &lt;div class=&quot;b&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

子元素增长到溢出的高度

问题

答案1

答案2

答案3

答案4

在获取输出方面存在困难。

如何修复句子超出材料 UI 的框外。

如何处理这些多个表单？

如何在Next.js中使用样式CSS文件？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论