如何解决Tailwind CSS侧边栏垂直滚动时底部被截断问题

问题描述 #

使用Tailwind CSS构建的页面，垂直向下滚动时侧边栏会出现底部被截断的情况。

原代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Example</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex">
    <!-- Sidebar -->
    <div class="h-screen w-64 border-r border-gray-200 bg-white p-4">
        <h1 class="text-xl font-semibold">Sidebar</h1>
        <ul class="mt-4">
            <!-- Manually added list items for demonstration -->
            <li class="py-2">Item 1</li>
            <li class="py-2">Item 2</li>
            <li class="py-2">Item 3</li>
            <!-- Add more items as needed -->
        </ul>
    </div>
    <!-- Main content -->
    <div class="flex-1 p-8" style="min-height: 200vh;">
        <h2 class="text-2xl font-bold">Main Content</h2>
        <p>This is the main content area.</p>
        <!-- Additional content here -->
        <p>Scroll down to see more content...</p>
    </div>
</body>
</html>

问题现象 #

解决方法 #

只需修改侧边栏的类名：

• 移除h-screen，替换为h-full
• 添加overflow-y-auto

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Example</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex">
    <!-- Sidebar -->
    <div class="h-full w-64 border-r border-gray-200 bg-white p-4 overflow-y-auto">
        <h1 class="text-xl font-semibold">Sidebar</h1>
        <ul class="mt-4">
            <!-- Manually added list items for demonstration -->
            <li class="py-2">Item 1</li>
            <li class="py-2">Item 2</li>
            <li class="py-2">Item 3</li>
            <!-- Add more items as needed -->
        </ul>
    </div>
    <!-- Main content -->
    <div class="flex-1 p-8" style="min-height: 200vh;">
        <h2 class="text-2xl font-bold">Main Content</h2>
        <p>This is the main content area.</p>
        <!-- Additional content here -->
        <p>Scroll down to see more content...</p>
    </div>
</body>
</html>

原理说明 #

原代码中h-screen将侧边栏高度固定为当前视口高度，当主内容过长导致页面整体高度超过视口时，侧边栏无法跟随页面高度延伸，滚动时就会出现底部截断。换成h-full后，侧边栏会继承flex容器（body）的高度，而body会被主内容撑开至足够高度；添加overflow-y-auto后，若侧边栏自身内容过多，也能在内部滚动，避免内容溢出截断。

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