英文:
CSS ReactJS - div not setting his height to full
问题
我有一个导航栏和一个组件，需要填充屏幕高度的剩余空间。
绿色 - 我想要得到的结果
蓝色 - 当前的样子。
我尝试设置高度为h-screen，但也不起作用...（过度拟合）
我在使用tailwind进行CSS
Home.tsx
import Navbar from './components/navbar';
import Cart from './components/Cart';
export default function Home() {
return (
<main className="flex min-h-screen flex-col">
<Navbar />
<div className="flex h-full">
<Cart />
</div>
</main>
)
}
Cart.tsx
export default function Cart() {
return (
<div className="w-1/5 p-5 text-left border h-full">
<p>我的购物车</p>
</div>
)
}
英文:
I have a navbar and a component that needs to fill the remaining space of the screen height.
Green - the result I want to get
Blue - how it looks right now.
I have tried to set the height to h-screen but it doesn't work too... (its overfitting)
I am using tailwind for CSS
Home.tsx
import Navbar from './components/navbar';
import Cart from './components/Cart';
export default function Home() {
return (
<main className="flex min-h-screen flex-col">
<Navbar />
<div className="flex h-full">
<Cart />
</div>
</main>
)
}
Cart.tsx
export default function Cart() {
return (
<div className="w-1/5 p-5 text-left border h-full">
<p>הסל קניות שלי</p>
</div>
)
}
答案1
得分: 1
你可以考虑将flex-grow: 1应用于<Cart>的<div>包装器，以使<div>包装器在屏幕高度中占用<NavBar>未占用的部分。然后，从<Cart>的根级<div>中移除height: 100%，以便默认的align-items: stretch生效，允许<Cart>的根级<div>的高度等于<Cart>的<div>包装器的高度。
英文:
You could consider applying flex-grow: 1 to the <div> wrapper of <Cart> so that the <div> wrapper grows in height to the remainder of the screen height not occupied by <NavBar>. Then, remove height: 100% from the <Cart> root level <div> so that the default align-items: stretch takes effect, allowing the <Cart> root level <div> to be the height of the <div> wrapper of <Cart>.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<main class="flex min-h-screen flex-col">
<Navbar>Navbar</Navbar>
<div class="flex grow">
<div class="w-1/5 p-5 text-left border">
<p>הסל קניות שלי</p>
</div>
</div>
</main>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论