MenusLesson 8Free preview

Full Page Tabs

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of a full-page tab. This component transforms the entire screen view into a single canvas of full content when the tab button is selected, ideal for an interactive landing page or web presentation.

Key points

Tab panel uses height: 100% to cover the entire screen viewport height
The tab button is placed attached at the top with a fixed or absolute position
Apply vibrant full background coloring to each tab
It requires html settings, body {height: 100%; margin: 0;} on basic CSS

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.