Question

下面的Tailwind CSS,如果你 down倒,你就会看到,bar子被切割到底部。

<!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/[email protected]/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>

如何防止这种情况?

https://codepen.io/alexcheninfo/pen/MWRgrrP”rel=“nofollow noreferer”>Codepen

Answer 1

更改<条码>h- 屏幕至<条码>。决定

www.un.org/Depts/DGACM/index_spanish.htm min-hels: 100vh;

document.body.classList.add( bg-blue-700 );

<!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/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex">
    <!-- Sidebar -->
    <div class="min-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>

友情链接