如何使我的绝对定位覆盖整个容器并具有溢出滚动?

huangapple go评论60阅读模式
英文:

How to make my absolute cover the whole container with overflow scroll?

问题

以下是您要翻译的内容:

我有一个容器(position: relative),高度有限(在我的HTML中,它由flex box限制,所以实际上不像下面的代码中的200px那样)。它包含决定其宽度和高度的内容。在内容之上,我有一个absolute的遮罩,带有一个背景,部分覆盖内容。

然而,当内容溢出并出现滚动条时,.cover元素不会拉伸。我尝试过以下方法:

  • widthheight设置为100%
  • rightbottom设置为0
  • 根据另一个我无法再次找到的SO答案,我设置了min-height: 100%bottom: auto

以上方法都不能拉伸.cover以匹配内容。这是否可能?

英文:

I have a container (position: relative) with limited height (in my HTML it's limited by a flex box so I actually don't have the 200px as in the below code shows). It has the content that determines its width and height. Above the content, I have an absolute cover with a background to partially cover the content.

However, when the content overflows, and scrollbars appear, the .cover element does not stretch out. I have tried the following:

  • width and height to 100%.
  • right and bottom to 0.
  • From another SO answer I cannot find again, I set min-height: 100% and bottom: auto.

None of the above stretch the .cover to match the content. Is it possible?

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

<!-- language: lang-css -->

p {
  width: 2000px; /* Simulating a wide content */
  height: 300px;
  background: cornflowerblue;
  margin: 0;
}

.my-container {
  position: relative;
  overflow: auto;  
  height: 200px; /* Simulating limited space */
  border: 1px solid red;
}

.my-container .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: rgba(0,0,0,.8);
  /* I have tried each of these: */
  /*height: 100%;*/
  /*bottom: 0;*/
  min-height: 100%;
  bottom: auto;      
}

.my-container .cover span {
  background: white;
  padding: 1rem;
  margin: 1rem;
}

<!-- language: lang-html -->

&lt;div class=&quot;my-container&quot;&gt;
  &lt;div&gt;
    &lt;p&gt;Very long text line or very wide image.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;cover&quot;&gt;
    &lt;span class=&quot;cover-content&quot;&gt;Hello&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

感谢 "pier farrugia" 的评论,我意识到我可以创建一个与封面父容器分开的滚动容器。所以我只需要添加另一个包装器:

<div class="scrolling-container">
  <div class="my-container">
    <div>
      <p>非常长的文本行或非常宽的图像。</p>
    </div>

    <div class="cover">
      <span class="cover-content">你好</span>
    </div>
  </div>
</div>
.scroll-container {
  overflow: auto;
  height: 200px; /* 模拟有限空间 */
  border: 1px solid red;
}

p {
  width: 2000px; /* 模拟宽内容 */
  height: 300px;
  background: cornflowerblue;
  margin: 0;
}

.my-container {
  position: relative;
  width: fit-content; /* 这是为了根据内容扩展宽度 */
}

.my-container .cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
}

.my-container .cover span {
  background: white;
  padding: 1rem;
  margin: 1rem;
}
英文:

Thanks to "pier farrugia"'s comment, I realized I could make a scrolling container separate from the cover parent. So I just need to add another wrapper:

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

<!-- language: lang-css -->

.scrolling-container {
  overflow: auto;  
  height: 200px; /* Simulating limited space */
  border: 1px solid red;
}

p {
  width: 2000px; /* Simulating a wide content */
  height: 300px;
  background: cornflowerblue;
  margin: 0;
}

.my-container {
  position: relative;
  width: fit-content; /* This is needed to expand the width to match content */
}

.my-container .cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.8);     
}

.my-container .cover span {
  background: white;
  padding: 1rem;
  margin: 1rem;
}

<!-- language: lang-html -->

&lt;div class=&quot;scrolling-container&quot;&gt;
  &lt;div class=&quot;my-container&quot;&gt;
    &lt;div&gt;
      &lt;p&gt;Very long text line or very wide image.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class=&quot;cover&quot;&gt;
      &lt;span class=&quot;cover-content&quot;&gt;Hello&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

这是您的解决方案:

p标签的所有父元素的显示设置为inline-block,以便它们可以根据子元素的宽度进行拉伸。无法使用100%的宽度。

.my-container{display: inline-block;}
.my-container div:first-child{display: inline-block;}
英文:

Here is your solution:

Set the display to inline-block of all the parents of that p tag so that they can get stretched following the child width. It can't be done with 100% width.

.my-container{display: inline-block;}
.my-container div:first-child{display: inline-block;}

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

<!-- language: lang-css -->

   p {
      width: 2000px; /* Simulating a wide content */
      height: 300px;
      background: cornflowerblue;
      margin: 0;
    }

    .my-container {
      position: relative;
      overflow: auto;  
      height: 200px; /* Simulating limited space */
      border: 1px solid red;
      display: inline-block;
    }

    .my-container .cover {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background: rgba(0,0,0,.8);
      /* I have tried each of these: */
      /*height: 100%;*/
      /*bottom: 0;*/
      min-height: 100%;
      bottom: auto;      
    }

    .my-container .cover span {
      background: white;
      padding: 1rem;
      margin: 1rem;
    }

<!-- language: lang-html -->

&lt;div class=&quot;my-container&quot;&gt;
  &lt;div style=&quot;display: inline-block;&quot;&gt;
    &lt;p&gt;Very long text line or very wide image.&lt;/p&gt;
  &lt;/div&gt;

  &lt;div class=&quot;cover&quot;&gt;
    &lt;span class=&quot;cover-content&quot;&gt;Hello&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月4日 22:16:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/76613552.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定