Keeping footer down at the bottom with Material-UI Expansion Drawers

Question

I am using Material-UI@next for my React app. In one particular component, I am displaying a list of items using Expansion Panels. I also have a simple <Footer /> component that looks like this:

import React, { Component } from "react";

import styled from "styled-components";
import Typography from "material-ui/Typography";

const FooterContainer = styled.div`
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100% !important;
  height: 100px !important ;
  background: #6cf;
`;

class Footer extends Component {
  render() {
    return (
      <FooterContainer>
        <Typography variant="title">Footer Text</Typography>
      </FooterContainer>
    );
  }
}

export default Footer;

This is the code snippet where I am using <Footer /> under the list of items:

  render() {
    return this.props.isFetching ? (
      <Typography>Loading...</Typography>
    ) : (
      <Container>
        <StyledTitle variant="display1" gutterBottom color="secondary">
          Listings
        </StyledTitle>
        <Grid container spacing={24}>
          {this.renderListings()}
        </Grid>
        <Footer />
      </Container>
    );
  }

,where renderListings() is just doing an iteration over an array and displaying the results in an Expansion Panel:

...
      <Grid key={listing._id} item xs={12} sm={12} lg={12}>
        <StyledExpansionPanel>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <ExpansionPanelColumn>
              <Typography>{listing.name}</Typography>
            </ExpansionPanelColumn>
          </ExpansionPanelSummary>
          <Divider />
          <ExpansionPanelDetails>
            <Typography>Notes: {listing.notes}</Typography>
          </ExpansionPanelDetails>
          <Divider />
        </StyledExpansionPanel>
      </Grid>
...

The problem is that when the Expansion Panels are closed, the footer displays fine, however when the expansion panels are open, they get under the footer and the footer is no longer at the bottom of the page.

Answer 1

I solved this by using flex. In a nutshell, all I needed to do is change the <Container /> component style as follows:

export const Container = styled.div`
  display: flex;
  min-height: 100vh;
  flex-direction: column;
`;

When I wrap the vertical sections in a flex container and choose which ones you want to expand, they’ll automatically take up all the available space in their container.