堆栈内存溢出
  简体   繁体   English

如何使用 css 将元素定位在多个 div 上并调整高度

[英]How could I use css to position an element over multiple divs and have one resize height

 原文  2022-06-26 20:34:35  4   1    javascript/ html/ css

问题描述

I am working on a website that has quite a convoluted layout.我正在一个布局相当复杂的网站上工作。 The issue is that there are two divs that are completely circular but then cut off to fit the screen.问题是有两个 div 完全是圆形的，但随后被截断以适应屏幕。 I want the content to overlay those 2 divs, however, if it gets higher than those two divs there should be space added between those two divs so the content doesn't slip off the last (second) div.我希望内容覆盖这两个 div，但是，如果它高于这两个 div，则应该在这两个 div 之间添加空间，这样内容就不会从最后一个（第二个）div 中滑落。

An example is here: https://codepen.io/erce312/pen/YzaKVJM (Note I used tailwind)一个例子在这里： https ://codepen.io/erce312/pen/YzaKVJM（注意我使用了顺风）

<div class="w-screen h-screen bg-transparent relative overflow-hidden">
  <div class="overflow-hidden absolute" style="background-color: rgb(115, 108, 64); width: 1312.5px; height: 1312.5px; top: 0px; bottom: unset; right: unset; left: 0px; z-index: 0; border-top-left-radius: 9999px; border-top-right-radius: 9999px;"></div>
</div>
<div class="flex-1 flex flex-col h-full items-center bg-purple-500">
  <div class="bg-green-200 my-10 flex flex-1">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
      tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
      felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
      tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
      est. Morbi et sem pharetra, consequat ligula imperdiet, semper
      tellus.
    </p>
  </div>
  <div class="bg-green-200 my-10 flex flex-1">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
      tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
      felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
      tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
      est. Morbi et sem pharetra, consequat ligula imperdiet, semper
      tellus.
    </p>
  </div>
  <div class="bg-green-200 my-10 flex flex-1">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
      tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
      felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
      tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
      est. Morbi et sem pharetra, consequat ligula imperdiet, semper
      tellus.
    </p>
  </div>
  <div class="bg-green-200 my-10 flex flex-1">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
      tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
      felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
      tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
      est. Morbi et sem pharetra, consequat ligula imperdiet, semper
      tellus.
    </p>
  </div>
</div>
<div class="w-screen h-screen bg-transparent relative overflow-hidden">
  <div class="overflow-hidden absolute" style="background-color: rgb(115, 108, 64); width: 1312.5px; height: 1312.5px; top: unset; bottom: 0px; right: 0px; left: unset; z-index: 0; border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px;"></div>
</div>

To explain it on the example: The two green circular divs are fine the way they are.在示例中进行解释：两个绿色的圆形 div 很好。 The mint-colored cards should be positioned so that they start at the top of the first green circular div and reach the end of the bottom one.薄荷色卡片的位置应使它们从第一个绿色圆形 div 的顶部开始并到达底部的底部。 Upon resizing the middle, the purple-colored div should change its height to make sure the content is still from the top of the 1st green div to the bottom of the 2nd one.调整中间的大小后，紫色 div 应该改变它的高度，以确保内容仍然从第一个绿色 div 的顶部到第二个绿色 div 的底部。

The only way I could do this resizing of the middle div is using js, but I don't want to if it's not necessary.我可以调整中间 div 大小的唯一方法是使用 js，但如果没有必要，我不想这样做。

布局

Edit:编辑：

I have pretty much what I want here except the height of the main div should be coming from the flexbox not the style.除了主 div 的高度应该来自 flexbox 而不是样式之外，我在这里几乎有我想要的东西。

Codepen: https://codepen.io/erce312/pen/YzaKVJM代码笔： https ://codepen.io/erce312/pen/YzaKVJM

<div class="h-full flex flex-col items-center relative" style="height: 3000px">
  <div class="z-10 w-screen h-screen bg-transparent relative overflow-hidden">
    <div class="overflow-hidden absolute" style="background-color: rgb(115, 108, 64); width: 1312.5px; height: 1312.5px; top: 0px; bottom: unset; right: unset; left: 0px; z-index: 0; border-top-left-radius: 9999px; border-top-right-radius: 9999px;"></div>
  </div>
  <div class="flex-1 flex flex-col h-full items-center absolute bg-purple-500">
    <div class="bg-green-200 m-10 flex flex-1 z-20">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
      </p>
    </div>
    <div class="bg-green-200 m-10 flex flex-1 z-20">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
      </p>
    </div>
    <div class="bg-green-200 m-10 flex flex-1 z-20">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
      </p>
    </div>
    <div class="bg-green-200 m-10 flex flex-1 z-20">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
      </p>
    </div>
      <div class="bg-green-200 m-10 flex flex-1 z-20">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
      tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
      felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
      tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
      est. Morbi et sem pharetra, consequat ligula imperdiet, semper
      tellus.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
      tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
      felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
      tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
      est. Morbi et sem pharetra, consequat ligula imperdiet, semper
      tellus.
    </p>
  </div>
  </div>
  <div class="w-screen z-10 h-screen bg-transparent absolute bottom-0 overflow-hidden">
    <div class="overflow-hidden absolute" style="background-color: rgb(115, 108, 64); width: 1312.5px; height: 1312.5px; top: unset; bottom: 0px; right: 0px; left: unset; z-index: 0; border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px;"></div>
  </div>
</div>

1 个解决方案

解决方案1
 1 已采纳  2022-06-28 20:24:00

Try this solution with grid on the parent (body) node and additional wrapper inside the center div.使用父（主体）节点上的网格和中心 div 内的附加包装器尝试此解决方案。 The wrapper needs us to stretch our content to full height.包装器需要我们将内容拉伸到完整高度。 With extra plain CSS we calculate and increase our center div element.使用额外的纯 CSS，我们计算并增加了我们的中心 div 元素。

style.css样式.css

body {
  --initial-size: 500px;
  --start-grow: 1200px;
  display: grid;
  grid-template-rows:
    1fr
    minmax(calc(var(--initial-size) + (var(--start-grow) - 100vw)), var(--initial-size))
    1fr;
  overflow-x: hidden;
  position: relative;
}


 body { --initial-size: 500px; --start-grow: 1200px; display: grid; grid-template-rows: 1fr minmax(calc(var(--initial-size) + (var(--start-grow) - 100vw)), var(--initial-size)) 1fr; overflow-x: hidden; position: relative; }
 <script src="https://cdn.tailwindcss.com"></script> <div class="w-screen h-screen bg-transparent relative overflow-hidden background-top"> <div class="overflow-hidden absolute" style=" background-color: rgb(115, 108, 64); width: 1312.5px; height: 1312.5px; top: 0px; left: 0px; z-index: 0; border-top-left-radius: 9999px; border-top-right-radius: 9999px; "></div> </div> <div class="flex-1 flex flex-col h-full items-center bg-purple-500 background-center"> <main class="flex flex-col justify-between absolute inset-0 z-10"> <div class="bg-green-200 flex py-8"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id est. Morbi et sem pharetra, consequat ligula imperdiet, semper tellus. </p> </div> <div class="bg-green-200 flex py-8"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id est. Morbi et sem pharetra, consequat ligula imperdiet, semper tellus. </p> </div> <div class="bg-green-200 flex py-8"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id est. Morbi et sem pharetra, consequat ligula imperdiet, semper tellus. </p> </div> <div class="bg-green-200 flex py-8"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id est. Morbi et sem pharetra, consequat ligula imperdiet, semper tellus. </p> </div> <div class="bg-green-200 flex py-8"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id est. Morbi et sem pharetra, consequat ligula imperdiet, semper tellus. </p> </div> </div> </main> </div> <div class="w-screen h-screen bg-transparent relative overflow-hidden background-bottom"> <div class="overflow-hidden absolute" style=" background-color: rgb(115, 108, 64); width: 1312.5px; height: 1312.5px; bottom: 0px; right: 0px; z-index: 0; border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; "></div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何调整高度<select>CSS 或 Javascript 中的元素？ - How can I resize the height of the <select> element in CSS or Javascript? 如何向UI Desinger证明2个div具有相同的高度和垂直位置？ - How can I prove to a UI Desinger that 2 divs have the same height and vertical position? 在多个CSS类的EACH元素上具有相等的高度和窗口调整大小功能 - Equal height and window resize function on EACH element of the multiple CSS classes 如何使用AngularJS功能在一个div中插入多个div（即某种多元素模板） - How to use AngularJS features to insert multiple divs in one div (i.e. some kind of multi-element template) 将div调整为自动大小，然后在调整窗口大小时将其高度设置为彼此相同？ - resize divs to auto and then to same height as one another upon window resize? 如何在几个较小的相邻 div 上拥有一张大图像 - How can I have one large image over several smaller adjoining divs 多个div如何具有85％的高度和100％的宽度？ - how can multiple divs have 85% height and 100% width? 如何使用具有“position：fixed”元素的代码段中的代码？ 我无法让它留在我的内心 <div> 身高（父母） - how can I use a code from a snippet which have a “position:fixed” element ? I can't make it stay inside my <div>'s height (parent) 如何使用CSS根据上一个div元素的宽度调整文本大小？ - How can I have text resize based on the width of the preceding div element using CSS? 根据浮动元素的高度放置CSS元素 - Position CSS element based on height of a floating element
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM