[{"_1":2,"_72":-5,"_73":-5},"loaderData",{"_3":4,"_37":38},"root",{"_5":-5,"_6":7,"_14":15,"_26":-7,"_27":28,"_29":30},"user","env",{"_8":9,"_10":11,"_12":13},"NODE_ENV","production","SENTRY_DSN","https://821171755e1ddcb279a6d38202653615@o4507432409825280.ingest.us.sentry.io/4507432410087424","DISALLOW_INDEXING",false,"requestInfo",{"_16":17,"_18":19,"_24":25},"origin","https://nichtsam.com","hints",{"_20":21,"_22":23},"theme","light","timeZone","UTC","userPreferences",{"_20":21},"toast","csrfToken","0uD!nwdHBlEmsMs*FMj01xGs%0s5pAs#","honeyProps",{"_31":32,"_33":34,"_35":36},"nameFieldName","name__confirm_P*+$s&FO0v","validFromFieldName","from__confirm","encryptedValidFrom","yBvF2fG0dAZsEjTaLnPhCbN6DkmqJNcTT+1x6s811kEc1hAlrn/RMb4=","routes/_site+/blog",{"_39":40},"posts",[41],{"_42":43,"_55":56,"_70":71},"matter",{"_44":45,"_46":47,"_48":49,"_50":51},"title","Writing CSS for a “Header + Main + Footer” Layout","description","Sharing my experiences and insights on implementing a \"Header + Main + Footer\" layout","publishedDate","Jan 2025","keywords",[52,53,54],"css","tailwind","layout","meta",{"_57":58,"_59":60,"_61":62,"_63":64,"_65":66,"_67":66,"_68":69},"contentDir","content/blog","dir",".","base","writing-css-for-a-header-main-footer-layout.mdx","ext",".mdx","name","writing-css-for-a-header-main-footer-layout","slug","content","\n# {frontmatter.title}\n\nThis is the layout I start with for almost every new project I begin. The concept is simple: a header, a main content container, and a footer, while ensuring a minimum height that fills the screen, with the main content filling the remaining space.\n\nI don’t enjoy writing vanilla CSS, so I will use [Tailwind CSS](https://tailwindcss.com/) in this article, though the general concepts apply to all CSS frameworks.\n\nIt’s relatively simple; I’m just writing this post to keep a record of it.\n\n## The Basics\n\nTo start, we need a root container for the header, main, and footer. While we could use the body tag, I prefer using a dedicated element (like a div) instead, as body is a single, global element.\n\n```html\n\n\t\n\t\t...\n\t\n\t\n\t\t

\n\t\t\t

...

\n\t\t\t

...

\n\t\t\t\n\t\t

\n\t\n\n```\n\nNow, we have the basic structure in place. Let’s move on to writing the styles.\n\n### Step 1: Full-Screen Height\n\nWe want the root container to take up the full screen height. In Tailwind, we can achieve this by applying the `\"min-h-screen\"` class.\nIn addition to `\"min-h-screen\"`, you can also use other CSS height units like `svh`, `lvh`, or `dvh` for more precise control over screen height.\n\n```html\n

\n\t

...

\n\t

...

\n\t\n

\n```\n\n### Step 2: Main Content Growing\n\nTo ensure that the main content fills the remaining space, we can apply the `\"flex-grow\"` class to the main element.\n\n```html\n

\n\t

...

\n\t

...

\n\t\n

\n```\n\nAnd that's it, you have a layout.\nOk I know this is simple.\n\n## Handling Nested Elements\n\nWhat if you have another element inside `

` that you want to stretch and fill the available space? Simply using `\"h-full\"` wouldn’t work, so we need to apply flexbox principles deeper into the layout.\n\n```html\n

\n\t

...

\n\t

\n\t\t

stuff

\n\t\t

filler

\n\t\t

other stuff

\n\t

\n\t\n

\n```\n\nand so on.\n\n## Fixed Main Height with Scrollable Content\n\nWhat if you want the main content to have a fixed height but still be scrollable while taking up the remaining space?\nDue to the nature of flexbox, it will overflow, and we need to adjust to that.\nThe default min-width value for an element is 0 (zero), and for flex items it is auto. This can make elements take up much more space than desired, resulting in overflow.\nSo the solution here is to set `min-width` back to 0.\n\n```html\n

\n\t

...

\n\t

...

\n\t\n

\n```\n\nand that's it.\n","readingTime","3 min read","actionData","errors"]