tacos_tacos_tacos tacos_tacos_tacos - 1 year ago 43
CSS Question

Is there a better way to ensure that a footer stays at the bottom of a scrollable div whose height is large enough to touch the bottom of the screen?

At the end of my post I provide the layout for the question.

I have a layout that has two columns, sort of, a navigation sidebar that is not always open (col0) and a main area (col1) that is always open. The main area displays content. Finally, I have a footer that sits right below the highest level of the page.

Inside the main or content area there is a transition component that presents the next routed component using CSS transitions.

What I need to do is to get the footer to be a footer, that is, to be strictly at the bottom of the scroll position of the screen and the containing div. That doesn't mean fixed because you can scroll.

I would like to do this in CSS but I cannot get it to go and I am feeling a bit tempted to have it read the height and update before the component is mounted etc. Is there a better way?

Here is a

function with plenty of stuff deleted for your convenience:

<div style={prepareStyles(styles.heightHundred)}>
<ChromeHelmet />
<AppBar ... yada .../>
<div style={prepareStyles(styles.root)}>
<div style={prepareStyles(styles.content)}>
initialStyle={{opacity: 0, transform: 'translateY(-100%)'}}
transition="opacity 0.2s ease-in, transform 0.3s ease-in-out 0.3s"
finalStyle={{opacity: 1, transform: 'translateY(0%)'}}
leaveStyle={{opacity: 0.9, transform: 'translateY(500%'}}
{ this.props.children }
<AppNavDrawer />
style={prepareStyles(styles.footer)} />


When I try to use
I can tell it is close but it has no effect because the sidebar is displayed with
position: fixed;
and some fancy CSS stuff inside the React component that I'm afraid to touch. But when I undo that
position: fixed
, the footer is where it needs to be but the sidebar is wonky obviously...

Answer Source

I would recommend using flex-box layout. it is supported by most browsers (IE 10 and up, Edge, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser, Chrome for Android).

just add these styles to the parent div

display: flex; 
flex-flow: column no-wrap; 
justify-content: space-between;

on the footer add

align-self: flex-end;

here is a GREAT explanation of flex and how it works. lots of really useful information here