使用TailwindCSS创建带有导航栏的全页面div。

huangapple
go评论93阅读模式
英文:

Making a full page div with a navbar in TailwindCSS

问题

I'm using Tailwind CSS and I would like to achieve a layout which includes:

  • A sticky navbar
  • A full-page section with centered content
  • Other sections with variable height
  • A footer

Here's a quick representation:

  1. +--------------------------+    -+
  2. |  Navbar (sticky)         |     |
  3. |--------------------------|     |
  4. |                          |     |
  5. |                          |     | --> this has viewport height
  6. |    centered content      |     | 
  7. |                          |     |
  8. |                          |     |
  9. |--------------------------|    -+
  10. |                          |
  11. | Section 1                |
  12. |                          |
  13. +--------------------------+              
  14. | Section 2                |
  15. +--------------------------+
  16. | Footer                   |
  17. +--------------------------+

I would like the centered content section to take up all the remaining space of the viewport after the navbar, but applying the h-screen class causes it to be as high as the viewport causing an overflow. Here's some reproducible code:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <script src="https://cdn.tailwindcss.com"></script>
  7.   <style>
  8.     html, body {
  9.       height: 100%;
  10.       width: 100%;
  11.       margin: 0;
  12.     }
  13.   </style>
  14. </head>
  15. <body>
  16.   <div class="h-20 text-5xl sticky top-0 text-center bg-slate-300/50">
  17.       Menu
  18.   </div>
  19.   <div class="h-screen mx-auto bg-indigo-300 flex flex-col justify-center items-center text-5xl">
  20.       content
  21.   </div>
  22.   <div class="h-80 mx-auto bg-green-300 flex flex-col justify-center items-center text-5xl">
  23.       content
  24.   </div>
  25.   <div class="h-20 mx-auto bg-black text-white flex flex-col justify-center items-center text-5xl">
  26.       footer 
  27.   </div>
  28. </body>
  29. </html>

Can someone help me to find a way to make the "centered content" section take up all the remaining space while letting the other, following, sections have an arbitrary height.

英文:

I'm using Tailwind CSS and I would like to achieve a layout which includes:

  • A sticky navbar
  • A full-page section with centered content
  • Other sections with variable height
  • A footer

Here's a quick representation:

  1. +--------------------------+    -+
  2. |  Navbar (sticky)         |     |
  3. |--------------------------|     |
  4. |                          |     |
  5. |                          |     | --&gt; this has viewport height
  6. |    centered content      |     | 
  7. |                          |     |
  8. |                          |     |
  9. |--------------------------|    -+
  10. |                          |
  11. | Section 1                |
  12. |                          |
  13. +--------------------------+              
  14. | Section 2                |
  15. +--------------------------+
  16. | Footer                   |
  17. +--------------------------+

I would like the centered content section to take up all the remaining space of the viewport after the navbar, but applying the h-screen class causes it to be as height as the viewport causing an overflow. Here's some reproducible code:

  1. &lt;!doctype html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.   &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
  7.   &lt;style&gt;
  8.     html, body {
  9.       height: 100%;
  10.       width: 100%;
  11.       margin: 0;
  12.     }
  13.   &lt;/style&gt;
  14. &lt;/head&gt;
  15. &lt;body&gt;
  16.   &lt;div class=&quot;h-20 text-5xl sticky top-0 text-center bg-slate-300/50&quot;&gt;
  17.       Menu
  18.   &lt;/div&gt;
  19.   &lt;div class=&quot;h-screen mx-auto bg-indigo-300 flex flex-col justify-center items-center text-5xl&quot;&gt;
  20.       content
  21.   &lt;/div&gt;
  22.   &lt;div class=&quot;h-80 mx-auto bg-green-300 flex flex-col justify-center items-center text-5xl&quot;&gt;
  23.       content
  24.   &lt;/div&gt;
  25.   &lt;div class=&quot;h-20 mx-auto bg-black text-white flex flex-col justify-center items-center text-5xl&quot;&gt;
  26.       footer 
  27.   &lt;/div&gt;
  28. &lt;/body&gt;
  29. &lt;/html&gt;

Can someone help me to find a way to make the "centered content" section take up all the remaining space while letting the other, following, sections have an arbitrary height.

Thank you.

答案1

得分: 0

有两种解决方案可供调整您的布局。

您可以向粘性导航栏添加负的底部边距 -mb-20

  1. &lt;div class=&quot;h-20 text-5xl sticky top-0 text-center bg-slate-300/50 -mb-20&quot;&gt;
  2.   菜单
  3. &lt;/div&gt;

或者您可以将导航栏的位置更改为 fixed

  1. &lt;div class=&quot;h-20 text-5xl fixed top-0 inset-x-0 text-center bg-slate-300/50&quot;&gt;
  2.   菜单
英文:

There is 2 solutions for your layout.

You can add negative margin bottom to sticky navbar -mb-20

  1. &lt;div class=&quot;h-20 text-5xl sticky top-0 text-center bg-slate-300/50 -mb-20&quot;&gt;
  2.   Menu
  3. &lt;/div&gt;

or you can change you navbar position to fixed

  1. &lt;div class=&quot;h-20 text-5xl fixed top-0 inset-x-0 text-center bg-slate-300/50&quot;&gt;
  2.   Menu

Hope this helps.

huangapple
  • 本文由 发表于 2023年2月16日 02:22:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/75463968.html
  • css
  • frontend
  • html
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定