Tailwind中浏览器缩小时，如何让body背景铺满滚动高度？

问题原因 #

你用的h-screen是固定元素高度等于当前浏览器视口高度，一旦页面内容超过视口高度出现滚动条，body的高度不会跟着内容延伸，所以滚动下去的区域就会显示白色。而h-full需要父元素（也就是html标签）有明确的高度才能生效，默认html没有设置高度，所以h-full也起不了作用。

修复步骤 #

1. 把body上的h-screen替换成min-h-screen，这个类会让元素最小高度等于视口高度，当内容超过视口时，元素高度自动扩展以包裹所有内容，背景自然就能覆盖整个页面。
2. 给html标签也加上min-h-screen类，确保body的高度能正确继承（因为html是body的父元素，默认没有高度限制的话，body的min-h-screen可能无法完全生效）。

修改后的代码示例 #

<html class="min-h-screen">
<body class="font-sans bg-gray-100 min-h-screen">
    <div>
      <!-- Left Sidebar -->
    <div class="flex min-h-screen bg-gray-800 text-white"> 
      <!-- Sidebar Content -->
      <div class="w-64 bg-gray-700">
        <!-- Sidebar Header -->
        <div class="flex items-center justify-start p-4">
          <h1 class="text-2xl font-semibold text-text-green">Test</h1>
        </div>
        <!-- Sidebar Links -->
        <nav class="p-4">
        </nav>
      </div>

      <!-- Main Content -->
      <div class="flex-1 p-4">
        <!-- Your main content goes here -->
        <div class="main-header">
          <div class="mb-0">
            <div class="relative mb-0 flex w-full flex-wrap items-stretch">
              <!--Search icon-->
              <span
                class="input-group-text flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-neutral-700 dark:text-neutral-200"
                id="basic-addon2"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="var(--icon-color)"
                  class="h-5 w-5"
                >
                  <path
                    fill-rule="evenodd"
                    d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
                    clip-rule="evenodd"
                  />
                </svg>
              </span>
              <input
                type="search"
                class="relative m-0 block min-w-0 flex-auto rounded bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
                placeholder="Search..."
                aria-label="Search"
                aria-describedby="button-addon2"
              />
            </div>
          </div>
          <div>
            <div class="login">
            </div>
          </div>
        </div>
        <h2 class="text-2xl font-semibold mb-4">Main Content</h2>
        <p>This is where your main content goes.</p>
        <h2 class="text-2xl font-semibold mb-4">Main Content</h2>
        <h2 class="text-2xl font-semibold mb-4">Main Content</h2>
        <h2 class="text-2xl font-semibold mb-4">Main Content</h2>
        <h2 class="text-2xl font-semibold mb-4">Main Content</h2>
        <h2 class="text-2xl font-semibold mb-4">Main Content</h2>
        <h2 class="text-2xl font-semibold mb-4">Main Content</h2>      
    </div>  
  </body>
</html>

补充说明 #

另外注意你侧边栏的容器原本用了h-screen，如果希望侧边栏能跟着页面内容一起延伸高度，也把这个h-screen换成min-h-screen，这样侧边栏的高度会和页面内容高度保持一致，不会出现内容滚动时侧边栏截断的情况。

内容的提问来源于stack exchange，提问作者Vlad M