[英]How could I use css to position an element over multiple divs and have one resize height
我正在一個布局相當復雜的網站上工作。 問題是有兩個 div 完全是圓形的，但隨后被截斷以適應屏幕。 我希望內容覆蓋這兩個 div，但是，如果它高於這兩個 div，則應該在這兩個 div 之間添加空間，這樣內容就不會從最后一個（第二個）div 中滑落。
一個例子在這里： 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>
在示例中進行解釋：兩個綠色的圓形 div 很好。 薄荷色卡片的位置應使它們從第一個綠色圓形 div 的頂部開始並到達底部的底部。 調整中間的大小后，紫色 div 應該改變它的高度，以確保內容仍然從第一個綠色 div 的頂部到第二個綠色 div 的底部。
我可以調整中間 div 大小的唯一方法是使用 js，但如果沒有必要，我不想這樣做。
編輯：
除了主 div 的高度應該來自 flexbox 而不是樣式之外，我在這里幾乎有我想要的東西。
代碼筆： 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>
使用父（主體）節點上的網格和中心 div 內的附加包裝器嘗試此解決方案。 包裝器需要我們將內容拉伸到完整高度。 使用額外的純 CSS，我們計算並增加了我們的中心 div 元素。
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>
如何調整高度<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?
如何使用具有“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?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.