Site logo

Archived topic

Sticky footer

16 replies · Started by Damiaan van Vliet on March 10, 2016

Viewing posts 16–17 of 17

Just a tip re: Micheal's very helpful CSS flexbox contribution above (thanks for sharing). This has worked for me very well to create a sticky footer (stuck to the bottom of the browser window) BUT it doesn't address the content width. If the content consists of long paragraph text, it renders fine - filling the width of the content container. But if the content consists of small bits of text, e.g. a list or contact information, the container only flexes wide enough to accommodate the content - and the content container is centered horizontally in the browser window. So you can end up with a collection of pages with inconsistent widths - mostly visible on large screens.

There is a simple fix: assign 100% width to the div.container:

div.container {
	flex: 1 0 auto;
	width: 100% !important;
}

pk

Thanks for sharing Pat

This archived topic is closed to new replies.