英文:
How to (with tailwind) fix a div top-bottom but make it flex left-right
问题
I have 2 divs.
- 右侧div -- 我希望它具有固定宽度 (600px) 并可滚动。
- 左侧div -- 我希望它是固定的 (不可滚动)，并填满除了导航栏占用的整个屏幕空间 (flex auto)。
然而，似乎 fixed 在 flex 布局中不起作用。所以我不确定如何最好地实现这个效果。有什么想法吗？
我的代码：https://play.tailwindcss.com/oodPsyoJWo
请注意，我不能简单地在我的代码中去除左侧div中的固定属性，因为那会使它可滚动。
英文:
I have 2 divs.
- right div -- I want it to be scrollable with a fixed width (600px)
- left div -- I want it to be fixed (not scrollable) and fill up the entire screen (except for the navbar) that's not taken by the right div (flex auto).
However, it seems like fixed does not work with flex. So I'm not sure what's the best way to do this. Any ideas?
My code: https://play.tailwindcss.com/oodPsyoJWo
Note that I can't simply remove the fixed property inside the left div in my code because that would make it scrollable.
答案1
得分: 2
以下是您要翻译的内容：
如果我理解正确，您希望页面顶部有一个固定导航，然后有两列，其中一列宽度固定且可以滚动，而另一列不滚动并填充剩下的屏幕空间，考虑到固定列。
这是CSS网格的一个很好的用例。基本上，最外层容器（在下面的演示中为body）创建了一个具有两行的网格：第一行（用于导航）使用max-content作为其高度，第二行填充剩余空间。将body设置为100vh（h-screen）确保它完全填充屏幕。
它还有两列。第二列宽度为600px，而第一列占用剩余空间。将col-span-full添加到页眉使其占据整个网格的宽度。
将body的overflow设置为hidden，然后将overflow-y-auto添加到main允许只有一列根据需要滚动。
工作示例（全屏打开以测试）
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<body class="grid h-screen grid-rows-[max-content_1fr] grid-cols-[1fr_600px] overflow-hidden">
<header class="col-span-full">
<nav class="flex flex-col gap-4 p-4 md:flex-row md:justify-between">
<h2 class="text-xl font-bold">固定导航高度是内容的最大高度</h2>
<p>导航始终固定在页面顶部</p>
</nav>
</header>
<aside class="bg-green-500 p-4">
<h2 class="mb-2 text-xl font-bold">固定流体宽度列<br />溢出被隐藏</h2>
</aside>
<main class="overflow-y-auto bg-green-700 p-4">
<h2 class="mb-2 text-xl font-bold">固定600px宽度列<br />使用overflow-y-auto滚动</h2>
<p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, rerum. Qui eum minus mollitia voluptates, voluptate vel tenetur? Molestias expedita porro esse laborum ipsa veritatis illo ab consequatur nesciunt voluptate.</p>
<p class="mb-2">Distinctio tenetur ratione, doloremque omnis quae quam, asperiores rerum exercitationem libero neque nisi aliquid non voluptatem incidunt cumque iusto ea laboriosam magni animi earum? Rerum odio molestias aut quaerat omnis.</p>
<p class="mb-2">Explicabo officiis quos asperiores officia iure, doloremque vitae assumenda architecto error enim exercitationem alias itaque suscipit voluptate, amet pariatur nihil ipsum omnis quae voluptatum harum distinctio obcaecati autem! Corporis, expedita?</p>
<p class="mb-2">Veniam non minus nam pariatur, cumque porro accusamus facilis rem libero ducimus laudantium sequi, ut quisquam deleniti sunt odit asperiores consectetur labore dolore voluptatem neque. Debitis sapiente ea itaque velit!</p>
<p class="mb-2">Fuga velit deserunt, sapiente et quos inventore ex vero laborum, at aspernatur, quam cum. Repellendus reprehenderit distinctio, maxime quia dolores in aliquid debitis nobis ipsam nisi quidem. Velit, adipisci veritatis!</p>
<p class="mb-2">Pariatur quisquam ducimus ex quia maiores quo atque quasi perspiciatis repellendus? Voluptate perferendis illum beatae, natus cumque eveniet labore nesciunt fugiat modi inventore sed? Quibusdam possimus est magnam facere alias?</p>
<p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, rerum. Qui eum minus mollitia voluptates, voluptate vel tenetur? Molestias expedita porro esse laborum ipsa veritatis illo ab consequatur nesciunt voluptate.</p>
<p class="mb-2">Distinctio tenetur ratione, doloremque omnis quae quam, asperiores rerum exercitationem libero neque nisi aliquid non voluptatem incidunt cumque iusto ea laboriosam magni animi earum? Rerum odio molestias aut quaerat omnis.</p>
<p class="mb-2">Explicabo officiis quos asperiores officia iure, doloremque vitae assumenda architecto error enim exercitationem alias itaque suscipit voluptate, amet pariatur nihil ipsum omnis quae voluptatum harum distinctio obcaecati autem! Corporis, expedita?</p>
<p class="mb-2">Veniam non minus nam pariatur, cumque porro accusamus facilis rem libero ducimus laudantium sequi, ut quisquam deleniti sunt odit asperiores consectetur labore dolore voluptatem neque. Debitis sapiente ea itaque velit!</p>
<p class="mb-2">Fuga velit deserunt, sapiente et quos inventore ex vero laborum, at aspernatur, quam cum. Repellendus reprehenderit distinctio, maxime quia dolores in aliquid debitis nobis ipsam nisi quidem. Velit, adipisci veritatis!</p>
<p class="mb-2">Pariatur quisquam ducimus ex quia maiores quo atque quasi perspiciatis repellendus? Voluptate perferendis illum beatae, natus cumque eveniet labore nesciunt fugiat modi inventore sed? Quibusdam possimus est magnam facere alias?</p>
</main>
</body>
<!-- end snippet -->
英文:
If I understood correctly, you want a fixed nav at the top of the page followed by two columns, where one column is fixed in width and scrolls, while the other doesn't scroll and fills the rest of the screen remaining after accounting for the fixed column.
This is a great case for CSS grid. Basically, the outermost container (body in the demo below) creates a grid that has two rows: the first (for the navigation) uses max-content for its height and the second row fills the remaining space. Setting the body to 100vh (h-screen), ensures that it fills the screen entirely.
It also has two columns. The second is 600px while the first takes up the remaining space. Adding col-span-full to the header causes it to take up the whole width of the grid.
Setting the overflow to hidden on the body and then adding overflow-y-auto to the main allows just that one column to scroll as needed.
Working snippet (open in full screen to test)
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<body class="grid h-screen grid-rows-[max-content_1fr] grid-cols-[1fr_600px] overflow-hidden">
<header class="col-span-full">
<nav class="flex flex-col gap-4 p-4 md:flex-row md:justify-between">
<h2 class="text-xl font-bold">Fixed nav height is the max height of contents</h2>
<p>Nav always fixed to the top of the page</p>
</nav>
</header>
<aside class="bg-green-500 p-4">
<h2 class="mb-2 text-xl font-bold">Fixed fluid-width column<br />overflow is hidden</h2>
</aside>
<main class="overflow-y-auto bg-green-700 p-4">
<h2 class="mb-2 text-xl font-bold">Fixed 600px width column<br />scroll with overflow-y-auto</h2>
<p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, rerum. Qui eum minus mollitia voluptates, voluptate vel tenetur? Molestias expedita porro esse laborum ipsa veritatis illo ab consequatur nesciunt voluptate.</p>
<p class="mb-2">Distinctio tenetur ratione, doloremque omnis quae quam, asperiores rerum exercitationem libero neque nisi aliquid non voluptatem incidunt cumque iusto ea laboriosam magni animi earum? Rerum odio molestias aut quaerat omnis.</p>
<p class="mb-2">Explicabo officiis quos asperiores officia iure, doloremque vitae assumenda architecto error enim exercitationem alias itaque suscipit voluptate, amet pariatur nihil ipsum omnis quae voluptatum harum distinctio obcaecati autem! Corporis, expedita?</p>
<p class="mb-2">Veniam non minus nam pariatur, cumque porro accusamus facilis rem libero ducimus laudantium sequi, ut quisquam deleniti sunt odit asperiores consectetur labore dolore voluptatem neque. Debitis sapiente ea itaque velit!</p>
<p class="mb-2">Fuga velit deserunt, sapiente et quos inventore ex vero laborum, at aspernatur, quam cum. Repellendus reprehenderit distinctio, maxime quia dolores in aliquid debitis nobis ipsam nisi quidem. Velit, adipisci veritatis!</p>
<p class="mb-2">Pariatur quisquam ducimus ex quia maiores quo atque quasi perspiciatis repellendus? Voluptate perferendis illum beatae, natus cumque eveniet labore nesciunt fugiat modi inventore sed? Quibusdam possimus est magnam facere alias?</p>
<p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, rerum. Qui eum minus mollitia voluptates, voluptate vel tenetur? Molestias expedita porro esse laborum ipsa veritatis illo ab consequatur nesciunt voluptate.</p>
<p class="mb-2">Distinctio tenetur ratione, doloremque omnis quae quam, asperiores rerum exercitationem libero neque nisi aliquid non voluptatem incidunt cumque iusto ea laboriosam magni animi earum? Rerum odio molestias aut quaerat omnis.</p>
<p class="mb-2">Explicabo officiis quos asperiores officia iure, doloremque vitae assumenda architecto error enim exercitationem alias itaque suscipit voluptate, amet pariatur nihil ipsum omnis quae voluptatum harum distinctio obcaecati autem! Corporis, expedita?</p>
<p class="mb-2">Veniam non minus nam pariatur, cumque porro accusamus facilis rem libero ducimus laudantium sequi, ut quisquam deleniti sunt odit asperiores consectetur labore dolore voluptatem neque. Debitis sapiente ea itaque velit!</p>
<p class="mb-2">Fuga velit deserunt, sapiente et quos inventore ex vero laborum, at aspernatur, quam cum. Repellendus reprehenderit distinctio, maxime quia dolores in aliquid debitis nobis ipsam nisi quidem. Velit, adipisci veritatis!</p>
<p class="mb-2">Pariatur quisquam ducimus ex quia maiores quo atque quasi perspiciatis repellendus? Voluptate perferendis illum beatae, natus cumque eveniet labore nesciunt fugiat modi inventore sed? Quibusdam possimus est magnam facere alias?</p>
</main>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论