Tailwind: футер у нижнего края страницы

размещаем футер в нижней части страницы с помощью Tailwind CSS

2024-11-17 dr.Brain

время чтения 1 мин.

Довольно часто, верстая страницы, можно обнаружить, что, если содержимое страницы недостаточно объемное, под футером остается ненужное пространство.

Вот прием, который позволить оставлять футер внизу страницы при использовании Tailwind CSS:

<body class="flex flex-col min-h-screen">
	<!-- navigation component -->
	<Navigation />

	<!-- main content -->
	<main class="flex-grow">
		<!-- site content -->
	</main>

	<!-- footer component -->
	<Footer />
</body>

Эта структура использует модель flexbox для утилит Tailwind CSS, создавая гибкую разметку на всю высоту (в том числе минимальную высоту) экрана. Содержимое блока main увеличивается, заполняя доступное пространство, и сдвигает футер в нижнюю часть области просмотра, когда содержимого недостаточно для заполнения страницы.

CSSклассы

К тегу bodyприменяется class="flex flex-col min-h-screen" для создания гибкой компоновки блока.

flex: создает гибкую блочную flexbox модель,
flex-col: направляет поток элементов по вертикали,
min-h-screen: гарантирует, что минимальная высота элемента body будет составлять не менее 100% высоты области просмотра. Если содержимое элемента не заполняет высоту области просмотра, это правило гарантирует, что body растянется по вертикали, чтобы заполнить всю область просмотра, не давая нижнему колонтитулу всплывать.

Примененный к элементу main class="flex-grow" позволяет области основного содержимого увеличиваться и заполнять все доступное пространство. Если в области просмотра доступно больше места, чем занимает содержимое, flex-grow расширит область основного содержимого, используя свободное пространство и сдвигая футер в нижнюю часть области просмотра.

Спасибо за внимание.