[SNIPPET] Footer always at bottom

[Stoker]

Footer always at bottom

These codelines will make sure that you footer always is placed at the bottom.
Check screenshots.

This is the code I use on my prosilver based theme:

Code: Select all

@media (min-width: 701px) {
	#wrap {
		display: flex;
		flex-direction: column;
		min-height: calc(100dvh - 46px) !important;  
	}
	#page-body {
		flex: 1;
	}
}
@media (max-width: 700px) {
	#wrap {
		display: flex;
		flex-direction: column;
		min-height: 100svh;  
	}
	#page-body {
		flex: 1;
	}
}

If you use Responsive Navbars, you need to add a line of code to:
responsivenavbar.css

Find:

Code: Select all

#wrap {
		margin-top: 60px;
		margin-bottom: 30px;
	}

Replace with:

Code: Select all

#wrap {
		margin-top: 60px;
		margin-bottom: 30px;
		min-height: calc(100svh - 90px) !important;
	}

Screenshot(1).png

Screenshot(3).png

Need a stylesheet for adding extra styling? No need to edit phpBB core!
You can use the Add CSS EXT

Older versions

Example3:
This one accounts for responsive design.

Code: Select all

@media (min-width: 701px) {
	#wrap {
		display: flex;
		flex-direction: column;
		min-height: 94dvh;
	}
	#page-body {
		flex: 1;
	}
}
@media (max-width: 700px) {
	#wrap {
		display: flex;
		flex-direction: column;
		min-height: 100svh;
	}
	#page-body {
		flex: 1;
	}
}

Example2:

Code: Select all

#wrap {
  display: flex;
  flex-direction: column;
  min-height: 94svh;
}

#page-body {
  flex: 1;
}

Example 1:

Code: Select all

#page-body {
	min-height: 50svh;
}