如何使父级div的高度与前景div匹配,而无需使用JavaScript。

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

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:

&lt;div className=&quot;w-screen h-screen&quot;&gt;
  &lt;LongBackgroundAnimation /&gt;
  &lt;div className=&quot;absolute top-0 z-10 m-8 backdrop-blur&quot;&gt;
    &lt;p className=&quot;&quot;&gt;
      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.
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

答案1

得分: 1

我将它放在一个grid中,两个grid项目都位于第一列和第一行,因此它们叠在一起。

    &lt;div className=&quot;w-screen h-screen grid&quot;&gt;
      &lt;div className=&quot;row-start-1 col-start-1&quot;&gt;
        &lt;LongBackgroundAnimation /&gt;
      &lt;/div&gt;
      &lt;div className=&quot;row-start-1 col-start-1 z-10 m-8 backdrop-blur&quot;&gt;
        &lt;p className=&quot;&quot;&gt;
          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.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
英文:

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.

    &lt;div className=&quot;w-screen h-screen grid&quot;&gt;
      &lt;div className=&quot;row-start-1 col-start-1&quot;&gt;
        &lt;LongBackgroundAnimation /&gt;
      &lt;/div&gt;
      &lt;div className=&quot;row-start-1 col-start-1 z-10 m-8 backdrop-blur&quot;&gt;
        &lt;p className=&quot;&quot;&gt;
          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.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

答案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 -->

&lt;div id=&quot;root&quot;&gt;
  &lt;canvas&gt;&lt;/canvas&gt;
  &lt;div class=&quot;content&quot;&gt;
    &lt;p&gt;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.&lt;/p&gt;
    &lt;p&gt;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.
    &lt;p&gt;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.
    &lt;p&gt;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.
    &lt;p&gt;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.
    &lt;p&gt;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.
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月31日 22:54:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76374808.html
匿名

发表评论

匿名网友

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

确定