Блог

Главная - Вопросы по программированию - Как исправить верхний, но не нижний колонтитул с помощью flexbox?

Как исправить верхний, но не нижний колонтитул с помощью flexbox?

#css #reactjs #tailwind-css

#css #reactjs #попутный ветер-css

Вопрос:

Что я пробовал, так это:

 import Header from 'components/layouts/Header';
import Footer from 'components/layouts/Footer';
import 'tailwindcss/tailwind.css';

type Props = {
    className?: string;
};

const PageLayout: React.FC<Props> = ({ children, className }) => {
    return (
        <>
            <div className="flex flex-col h-screen w-full bg-gray-100">
                <Header />
                <div
                    className={`flex-1 overflow-y-auto page-wrapper ${className}`}
                >
                    {children}
                </div>
            </div>
            <Footer />
        </>
    );
};

export default PageLayout;

Результат таков.

введите описание изображения здесь

У меня есть две полосы прокрутки с правой стороны, что странно. Как я могу добиться того, чтобы верхний колонтитул был исправлен, но не нижний колонтитул с помощью flexbox? Или есть какой-нибудь более простой способ исправить только заголовок?

Комментарии:

1. Я думаю, вам нужно изменить это overflow-y-auto на что-то другое, например overflow hidden

2. Похоже, что внутренние компоненты имеют фиксированную высоту и свойство переполнения

3. Нет, это не очень хорошая практика, настройка overflow hidden скроет переполненные элементы. Убедитесь, что height:auto

4. min-height:0 может помочь основной div. 😉

5. Спасибо вам, ребята, за обсуждение! Ни один из них не сработал для меня, но я, возможно, неправильно попробовал ваши идеи. > Ragul Cs, куда я должен поместить height:auto ? Я h-screen заменил его в главном div. > G-Cyrillus, min-height:0 вместо h-screen ? Или нужно поместить их оба?