英文:
How to make parent div match height of foreground div without javascript
问题
I have an animated background that I would like to display behind some text without having to resort to javascript. The text may overflow beyond the viewport. I want the background div to always be the same height as the div containing the text, and I want to achieve this without having to resort to Javascript. Is this possible?
Here is a code sandbox demonstrating my failed attempt:
https://codesandbox.io/s/div-over-div-height-matching-with-only-css-phvejg
And here is the HTML/css snippet in question:
<div className="w-screen h-screen">
<LongBackgroundAnimation />
<div className="absolute top-0 z-10 m-8 backdrop-blur">
<p className="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
(Note: The provided code is not translated as requested.)
英文:
I have an animated background that I would like to display behind some text without having to resort to javascript. The text may overflow beyond the viewport. I want the background div to always be the same height as the div containing the text, and I want to achieve this without having to resort to Javascript. Is this possible?
Here is a code sandbox demonstrating my failed attempt:
https://codesandbox.io/s/div-over-div-height-matching-with-only-css-phvejg
And here is the HTML/css snippet in question:
<div className="w-screen h-screen">
<LongBackgroundAnimation />
<div className="absolute top-0 z-10 m-8 backdrop-blur">
<p className="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
答案1
得分: 1
我将它放在一个grid
中,两个grid
项目都位于第一列和第一行,因此它们叠在一起。
<div className="w-screen h-screen grid">
<div className="row-start-1 col-start-1">
<LongBackgroundAnimation />
</div>
<div className="row-start-1 col-start-1 z-10 m-8 backdrop-blur">
<p className="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
英文:
I put it in a grid
and with both grid items in column 1 and row 1, so they are stacked on top of each other.
<div className="w-screen h-screen grid">
<div className="row-start-1 col-start-1">
<LongBackgroundAnimation />
</div>
<div className="row-start-1 col-start-1 z-10 m-8 backdrop-blur">
<p className="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
答案2
得分: 0
你的方法有些不准确。如果画布应用为背景,则应指定为 position: absolute
:
* {
margin: 0;
}
#root {
min-height: 100vh;
position: relative;
}
canvas {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
background: linear-gradient(orange, green);
z-index: -1;
}
<div id="root">
<canvas></canvas>
<div class="content">
<p>文本内容...</p>
<p>文本内容...</p>
<p>文本内容...</p>
<p>文本内容...</p>
<p>文本内容...</p>
<p>文本内容...</p>
</div>
</div>
英文:
You have a somewhat incorrect approach. If the canvas should be used as a background, then it should be specified as an position: absolute
:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
}
#root {
min-height: 100vh;
position: relative;
}
canvas {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
background: linear-gradient(orange, green);
z-index: -1;
}
<!-- language: lang-html -->
<div id="root">
<canvas></canvas>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论