Next.js+Tailwind+shadcn/ui：解决过度滚动导致底部空白问题

你的布局出现底部空白和过度滚动的核心原因有两点：

• 滚动容器内的子元素错误使用了h-full，导致高度计算冲突
• h-screen在部分场景下的视口高度计算偏差（尤其移动端）

shadcn/ui的Switch组件本身不会直接引发问题，但滚动容器的高度逻辑错误会在内容交互时更明显地暴露出来。

修复步骤： #

1. 移除滚动容器内子元素的h-full
   带overflow-y-auto的主内容滚动容器，不需要子元素强制撑满高度——内容会自然滚动，h-full会让子元素高度等于容器高度，叠加容器的p-4内边距后导致高度溢出，最终出现底部空白。

2. 用动态视口高度替代h-screen
   将最外层布局的h-screen改为h-[100dvh]，避免浏览器地址栏等因素导致的视口高度计算偏差，适配更多设备场景。

3. 全局样式重置（可选）
   在globals.css中添加基础样式，消除浏览器默认边距的影响：

   html, body {
     margin: 0;
     padding: 0;
     height: 100%;
     overflow: hidden;
   }
   

修改后的完整代码 #

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
} from "@/components/ui/form"
import { Switch } from "@/components/ui/switch"

const FormSchema = z.object({
    marketing_emails: z.boolean().default(false).optional(),
    security_emails: z.boolean(),
})

export default function Home() {
    const form = useForm<z.infer<typeof FormSchema>>({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            security_emails: true,
        },
    })

    function onSubmit(data: z.infer<typeof FormSchema>) {
        console.log(data)
    }
  return (
      <div className="flex h-[100dvh]">
        {/* Sidebar */}
        <div className="w-64 bg-gray-800 text-white p-4">
          <div className="bg-red-500 h-full">
            {/* Sidebar Content */}
          </div>
        </div>

        {/* Main Content */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Header */}
          <div className="bg-white shadow p-4">
            <div className="bg-green-500 h-12">
              {/* Header Content */}
            </div>
          </div>

          {/* Main */}
          <div className="flex-1 overflow-y-auto p-4">
              <div className="bg-blue-500 mb-4">
                  <div className={"h-72 bg-yellow-200"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"h-72 bg-orange-200"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"h-72 bg-purple-50"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"h-72 bg-blue-200"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"h-72 bg-pink-200"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"bg-green-200 h-72"}>
                      <Form {...form}>
                          <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
                              <div>
                                  <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
                                  <div className="space-y-4">
                                      <FormField
                                          control={form.control}
                                          name="marketing_emails"
                                          render={({field}) => (
                                              <FormItem
                                                  className="flex flex-row items-center justify-between rounded-lg border p-4">
                                                  <div className="space-y-0.5">
                                                      <FormLabel className="text-base">
                                                          Marketing emails
                                                      </FormLabel>
                                                      <FormDescription>
                                                          Receive emails about new products, features, and more.
                                                      </FormDescription>
                                                  </div>
                                                  <FormControl>
                                                      <Switch
                                                          checked={field.value}
                                                          onCheckedChange={field.onChange}
                                                      />
                                                  </FormControl>
                                              </FormItem>
                                          )}
                                      />
                                      <FormField
                                          control={form.control}
                                          name="security_emails"
                                          render={({field}) => (
                                              <FormItem
                                                  className="flex flex-row items-center justify-between rounded-lg border p-4">
                                                  <div className="space-y-0.5">
                                                      <FormLabel className="text-base">Security emails</FormLabel>
                                                      <FormDescription>
                                                          Receive emails about your account security.
                                                      </FormDescription>
                                                  </div>
                                                  <FormControl>
                                                      <Switch
                                                          checked={field.value}
                                                          onCheckedChange={field.onChange}
                                                          disabled
                                                          aria-readonly
                                                      />
                                                  </FormControl>
                                              </FormItem>
                                          )}
                                      />
                                  </div>
                              </div>
                              <Button type="submit">Submit</Button>
                          </form>
                      </Form>
                  </div>
              </div>
          </div>
        </div>
      </div>
  )
}

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