英文:
can I use top and calc within Tailwind CSS 3.0
问题
以下是您提供的内容的翻译：
所以我正在尝试在Tailwind中使用calc和top。我知道这个可以正常工作
<div className="w-60 h-[calc(100vh-5rem)]">侧边栏</div>
然而，我似乎无法使绝对定位的元素像这样一起下降
<div className="w-60 absolute top-[calc(100%-5rem)]">侧边栏</div>
除了尝试之外，我似乎找不到任何证据表明它是否有效。除了基本的类之外，是否还需要包含其他Tailwind类吗？
由我编辑，东部时间晚上8:32
此处的top-calc不适用于data-shop-area
<!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">您的购物袋是空的</div>
<a class="my-6 rounded-md bg-black p-2 text-white" href="#">开始购物</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">吃那些</a>
<a href="./index.html#products">产品</a>
<a href="./index.html#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">吃那些</a>
<a href="./index.html#products">产品</a>
<a href="./index.html#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">黑色狼标大号T恤</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>选择尺寸</option>
<option value="small">小号</option>
<option value="medium">中号</option>
<option value="large">大号</option>
<option value="x-large">特大号</option>
<option value="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">添加到购物袋 - $30.00</button>
</form>
<p>黑色T恤，100%棉，前中央有大号白色狼标志。</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
<details>
<summary>英文:</summary>
So I am trying to use calc wit the top in tailwind. I know this works fine
```html
<div className="w-60 h-[calc(100vh-5rem)]">Sidebar</div>
however I can't seem to get something that is absoluet to drop with it like such
<div className="w-60 absolute top-[calc(100%-5rem)]">Sidebar</div>
I can't seem to find any evidence whether or not it works or does not work besides trying it. Is there another tailwind class I need to include besides the basic ones??
Edited by me 8:32pm Eastern time
this top-calc not working on data-shop-area
<!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>
you can see th link here tailwind play
答案1
得分: 0
以下是您要翻译的部分：
"You should attach a larger part of the code, this will make the answer easier
Until then...
You must ensure that you are using the correct version of Tailwind
And make sure that the parent of the element using Position Absolute has a specified length
Here is the code that does what you want and attached a picture of the results ..
Sidebar
"
请注意，其中的代码和英文文本是原样保留的。
英文:
You should attach a larger part of the code, this will make the answer easier
Until then...
You must ensure that you are using the correct version of Tailwind
And make sure that the parent of the element using Position Absolute has a specified length
Here is the code that does what you want and attached a picture of the results ..
<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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论