将NAV结合在具有100VH（儿童）身体元素的布局中的NAV？

发布于 2025-02-05 06:53:50 字数 1506 浏览 2 评论 0原文

在我的页面中，我更喜欢直接样式，而是使用包装器。包装器具有最小值：100VH。请参阅此处的布局： https://play.tail.tail.tailwindcss.coms.com/ql9hvzg5mc 。

问题：如何使用该布局放置粘性＆lt; nav＆gt;？

解决方案1 ：将＆lt; nav＆gt;作为＆lt; body＆gt;的直接子。有效，但是出现垂直滚动条，因为100VH不会考虑＆lt; nav＆gt;高度。请注意，我不知道＆lt; nav＆gt;的高度，因此包装器不能为min -height：calc（100vh -32px），说。演示： https://play.tailwindcss.com/vgigcnrrn0

：将＆lt; nav＆gt;作为＆lt; header＆gt;的直接子。它行不通，因为，阿法克（我可能错了），该元素应该是身体的直接子。

解决方案3 ：有什么想法吗？

<body>
  <nav class="bg-orange-500 sticky top-0 p-4">
    nav
  </nav>
  <div class="flex flex-col min-h-screen bg-red-500">
    <header class="flex-shrink-0 bg-slate-500 p-4">
      header
    </header>
    <main class="flex-auto flex-shrink-0 bg-lime-500 p-4">
      main
    </main>
    <footer class="flex-shrink-0 bg-violet-500 p-4">
      footer
    </footer>
  </div>
</body>

原文

In my page i prefer not to style the directly, but use a wrapper instead. Wrapper has min-height: 100vh. See the layout here: https://play.tailwindcss.com/ql9hVzG5mc.

Question: how to place a sticky <nav> with that layout?

Solution 1: place the <nav> as direct child of the <body>. Works, but a vertical scrollbar appear because the 100vh doesn't take the <nav> height into account. Please note that i don't know the height of the <nav>, so the wrapper can't be min-height: calc(100vh - 32px), to say. Demo: https://play.tailwindcss.com/VGiGCnRrn0

Solution 2: place the <nav> as direct child of the <header>. It doesn't work because, AFAIK (I may be wrong), the element should be a direct child of the body.

Solution 3: any ideas?

<body>
  <nav class="bg-orange-500 sticky top-0 p-4">
    nav
  </nav>
  <div class="flex flex-col min-h-screen bg-red-500">
    <header class="flex-shrink-0 bg-slate-500 p-4">
      header
    </header>
    <main class="flex-auto flex-shrink-0 bg-lime-500 p-4">
      main
    </main>
    <footer class="flex-shrink-0 bg-violet-500 p-4">
      footer
    </footer>
  </div>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不知所踪 2025-02-12 06:53:50

将min-h-screen与身体元素一起使用，然后依靠flexbox扩展内容

<script src="https://cdn.tailwindcss.com"></script>
<body class="min-h-screen flex flex-col">
  <nav class="bg-orange-500 sticky top-0 p-4">
    nav
  </nav>
  <div class="flex flex-col grow bg-red-500">
    <header class="flex-shrink-0 bg-slate-500 p-4">
      header
    </header>
    <main class="flex-auto shrink-0 bg-lime-500 p-4">
      main
    </main>
    <footer class="flex-shrink-0 bg-violet-500 p-4">
      footer
    </footer>
  </div>
</body>

Use the min-h-screen with the body element instead and the rely on flexbox to extend the content

<script src="https://cdn.tailwindcss.com"></script>
<body class="min-h-screen flex flex-col">
  <nav class="bg-orange-500 sticky top-0 p-4">
    nav
  </nav>
  <div class="flex flex-col grow bg-red-500">
    <header class="flex-shrink-0 bg-slate-500 p-4">
      header
    </header>
    <main class="flex-auto shrink-0 bg-lime-500 p-4">
      main
    </main>
    <footer class="flex-shrink-0 bg-violet-500 p-4">
      footer
    </footer>
  </div>
</body>

回复收藏 0 原文

~没有更多了~