Archived topic
Sticky footer
16 replies · Started by Damiaan van Vliet on March 10, 2016
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