How to position a footer with Tailwindcss
Tags: webdev, tailwindcss, beginners, react
Published: 2022-11-20 14:36:06

I’ve always had problems with the positioning of footers in web pages I try making where I cant make the footer position stay at the bottom of the page when there isn't much content on the page and when there is enough content to fill the browser window the footer should retain its position below the main page content. Credit where credit is due, thanks to Radu for explaining this solution [here](https://radu.link/make-footer-stay-bottom-page-tailwind-css/).

I have however found a great solution to this problem using the Tailwindcss library classes `flex` `flex-col` `h-screen` and `mt-auto`

## Step 1

Wrap the page contents in a container, either a `div` tag or a semantic html tag and add these tailwindcss class names.

```html
<div className=”flex flex-col h-screen”>
	<!--content -->
</div>

// or

<main className=”flex flex-col h-screen”>
	<!--content -->
</main>
```
In React components just wrap the return statements in a `div` like so 
```react
function MainPage() {
	return(
		<div className=”flex flex-col h-screen”>
			{*/content */}
		</div>
	)

export default MainPage;
```

##Step 2
This step is simple, just add your main page content in the parent `div` created in step 1 and give  it the class name `h-full` so that it fills the parent `div` height (which was assigned `h-screen`, the screen height)
```html
<div className=”flex flex-col h-screen”>
	<!--main page content below-->
	<div className="h-full">
		<!-- content -->
	</div>
	<div>
</div>
```
Follow same steps in the react component too
```react
function MainPage() {
	return(
		<div className=”flex flex-col h-screen”>
			{*/main page content below */}
			<div className="h-full">
				{*/content */}
			</div>
		</div>
	)

export default MainPage;
```

##Step 3
Lastly, and our target for this solution is the footer itself. The footer needs but one class to position it at the bottom of the page regardless of the amount of content in the main page content container.

This means that even if we get page content that doesn’t fill the browser window the footer is still at the bottom, and if the page content exceeds the browser window (where scrolling is then applied) the footer will remain at the bottom of the content without overlapping the content.

We do this by giving the footer a `mt-auto` class which will automatically place extra space in the flex box as margin at the top of the footer and if there is no space (when content is exceeds browser window) it places no margin at the top and footer remains at the bottom.
```html
<div className=”flex flex-col h-screen”>
	<!--main page content below-->
	<div className="h-full">
		<!-- content -->
	</div>
	<div className="mt-auto">
		<!--footer content -->
	</div>
</div>
```
n a React app we can create the footer as its own component and just place it in every other page content component we want.


## The Footer component
```react
function Footer() {
	return(
		<div className=”mt-auto”>
				{*/ footer content */}
		</div>
	)

export default Footer;
```
The Main page content component
```react
function MainPage() {
	return(
		<div className=”flex flex-col h-screen”>

			{*/main page content below */}
			<div className="h-full">
				{*/content */}
			</div>

			<Footer />
		</div>
	)

export default MainPage;
```

And there you have it, three easy steps to place a footer at the bottom and make it stay there.

Side Note, `mb-auto` class added to the `div` above the footer can also work instead of mt-auto on the footer itself since they both would work with the space between the footer and the main page content.