Боковая панель обрезается внизу при вертикальной прокрутке

При использовании следующего CSS-кода Tailwind, если вы прокрутите вниз, вы увидите, что боковая панель внизу обрезана.

<!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>

Как это предотвратить?

Коден

html css tailwind-css

28.02.2024 02:55

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените h-screen, чтобы min-h-screen решить вашу проблему.

min-h-screen: минимальная высота: 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>

Почти... боковая панель будет обрезана, если основные элементы контента не занимают весь экран по вертикали: i.sstatic.net/Is8CS.png. Думаю, вы это увидите, если удалите min-height: 200vh;

— 28.02.2024 03:34

Я отредактировал ответ, теперь это может сработать

— 28.02.2024 03:51

Потрясающий! Почему у тебя всего 11 репутации? Я думаю, min-h-screen действует как h-auto и h-screen вместе?

— 28.02.2024 03:54

Да, ты прав. Свойство min-height определяет минимальную высоту элемента. Если содержимое меньше минимальной высоты, будет применена минимальная высота. Если содержимое больше минимальной высоты, свойство min-height не оказывает никакого эффекта, и высота будет начальным значением, то есть auto

— 28.02.2024 04:07

@wyc моя основная учетная запись SO была временно заблокирована

— 28.02.2024 04:09

28.02.2024 03:24