英文:
How to make my absolute cover the whole container with overflow scroll?
问题
以下是您要翻译的内容:
我有一个容器(position: relative
),高度有限(在我的HTML中,它由flex box限制,所以实际上不像下面的代码中的200px
那样)。它包含决定其宽度和高度的内容。在内容之上,我有一个absolute
的遮罩,带有一个背景,部分覆盖内容。
然而,当内容溢出并出现滚动条时,.cover
元素不会拉伸。我尝试过以下方法:
- 将
width
和height
设置为100%
。 - 将
right
和bottom
设置为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
andheight
to100%
.right
andbottom
to0
.- From another SO answer I cannot find again, I set
min-height: 100%
andbottom: 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 -->
<div class="my-container">
<div>
<p>Very long text line or very wide image.</p>
</div>
<div class="cover">
<span class="cover-content">Hello</span>
</div>
</div>
<!-- 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 -->
<div class="scrolling-container">
<div class="my-container">
<div>
<p>Very long text line or very wide image.</p>
</div>
<div class="cover">
<span class="cover-content">Hello</span>
</div>
</div>
</div>
<!-- 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 -->
<div class="my-container">
<div style="display: inline-block;">
<p>Very long text line or very wide image.</p>
</div>
<div class="cover">
<span class="cover-content">Hello</span>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论