1. flexを使う
<div class="flex flex-col">
<div>Header</div>
<div class="flex flex-row">
<div>Navbar</div>
<div>Content</div>
</div>
</div>
的な感じのやつ。
- pros
- わかりやすい
- cons
- なんかはみだしたりする
2. ヘッダとナビバーをfloatにする
<div className="h-full">
<div className="md:ml-[18rem] pt-10 z-0">
<Content />
</div>
<div className="fixed top-0 w-full h-10 flex flex-row items-center bg-white">
<Header />
<div className="hidden md:block fixed top-0 mt-10 min-w-[18rem] border-gray-700 border-r h-full bg-white">
<Sidebar />
</div>
</div>
- pros
- なんだかんだうまくいく