所以我試著在順風的頂部使用calc。我知道這很好
<div className="w-60 h-[calc(100vh-5rem)]">Sidebar</div>然而，我似乎找不到像這樣絕對可靠的東西
<div className="w-60 absolute top-[calc(100%-5rem)]">Sidebar</div>除了嘗試，我似乎找不到任何證據證明它是否有效。除了基本類之外，我還需要包含另一個順風類嗎？？
由我編輯東部時間晚上8:32 這種頂層計算不適用于數據商店區
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/site.css" />
<link rel="stylesheet" href="./css/notailwind.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="./js/site.js" defer></script>
<title>Al's Tailwind Css Boiler Plate</title>
</head>
<body class="m-0">
<header id="top" class="mt-0">
<section class="fixed top-0 flex w-full items-center justify-between gap-2 bg-black px-5 py-2 duration-700" data-main id="main-nav">
<div id="brand-logo">
<a href="#top"> <img class="w-28 rounded-full" src="https://assets.bigcartel.com/theme_images/95510953/3332963E-85A8-4A3F-9A8A-7EAD04CA73C5.jpeg" alt="Wolf Logo" /></a>
</div>
<div class="mr-4 flex items-center gap-2">
<div class="md:block" id="cart-div">
<div class="relative hidden md:block">
<a data-shop-btn class="block" id="sc" href="#">
<i class="fa-solid fa-shopping-cart px-6"></i>
</a>
<div data-shop-tri class="absolute top-full" id="triangle"></div>
<div data-shop-area class="top-[calc(100% - 20px)] absolute right-3 w-96 rounded-sm bg-white py-4 text-center text-black shadow-md">
<div class="my-6 text-xl">Your bag is empty</div>
<a class="my-6 rounded-md bg-black p-2 text-white" href="#">Start shopping</a>
</div>
</div>
</div>
<div class="block pr-3 text-5xl text-white md:hidden" data-ham-btn id="ham-btn">
<i data-i class="fa-solid fa-bars"></i>
</div>
<nav data-main-nav class="hidden gap-3 md:flex">
<a href="./index.html#eat">Eat Those </a>
<a href="./index.html#products">Products</a>
<a href="./index.html#contact">Contact</a>
</nav>
</div>
</section>
<section class="fixed top-32 hidden h-full w-full bg-black pt-10 md:hidden" data-mobile-nav id="mobile-nav">
<nav class="mx-auto flex w-2/3 flex-col gap-2 px-3 text-center md:hidden">
<a href="./index.html#eat">Eat Those </a>
<a href="./index.html#products">Products</a>
<a href="./index.html#contact">Contact</a>
</nav>
</section>
</header>
<main>
<section data-item-num>
<div class="mx-auto grid h-screen w-10/12 items-center justify-items-center gap-0 md:grid-cols-2" id="card">
<div id="card-image">
<img class="w-full overflow-hidden object-contain" src="./images/blacktbiglogo.png" alt="Black T-shirt Big Logo" />
</div>
<div class="grid gap-5 text-center" id="card-info">
<a href="#">
<p class="text-base md:text-3xl">Black Wolf T-Shirt Big Logo</p>
</a>
<p class="text-base text-red-600">$25.00 - $30.00</p>
<form class="grid justify-items-center gap-1" action="post">
<select class="w-1/2 rounded-sm border border-black p-3 text-center" name="size" id="size">
<option value="" selected disabled>Choose Size</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-Large</option>
<option value="xx-large">XX-Large</option></select
><br />
<button class="w-1/2 rounded-sm bg-black p-3 text-center text-base text-white duration-500 hover:bg-slate-700 md:text-lg" type="submit">Add To Bag - $30.00</button>
</form>
<p>Unisex Black T-shirt, 100% Cotton, with the big white wolf logo on the front center.</p>
</div>
</div>
</section>
</main>
<div id="mobile-shopping-cart" class="shoppin-cart md:hidden">
<a href="#shopping">
<i class="fa-solid fa-shopping-cart fixed bottom-0 w-full bg-slate-800 p-2 text-center text-white hover:bg-slate-600"></i>
</a>
</div>
<footer class="z-50 mx-0 flex min-h-full min-w-full flex-col justify-center bg-black p-4 text-center text-white md:mt-4 md:bg-gray-300 md:text-black">
<p class="p-3 text-xl">
Reach out on these platforms as well:
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-tiktok"></i></a>
</p>
<br />
<p>Powered by Big Cartel</p>
</footer>
</body>
</html>你可以在這里看到這個鏈接
你應該附上更大部分的代碼，這將使答案更容易 直到那時...
您必須確保您使用的是正確版本的順風 并確保使用絕對位置的元素的父元素具有指定的長度
下面是您想要的代碼，并附上了結果的圖片..
<div class="relative h-80 overflow-hidden bg-red-500">
<div class="w-80 bg-blue-400 absolute top-[calc(100%-50px)]">Sidebar</div>
</div>