Удерживая нижний колонтитул внизу с помощью ящиков расширения Material-UI

Question

Я использую Material-UI @ next для своего приложения React.В одном конкретном компоненте я отображаю список элементов, используя Панели расширения .У меня также есть простой <Footer /> компонент, который выглядит следующим образом:

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;

Это фрагмент кода, где я использую <Footer /> в списке элементов:

  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>
    );
  }

где renderListings() просто выполняет итерацию по массиву и отображает результаты на панели расширения:

...
      <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>
...

Проблема состоит в том, что когда панели расширения закрыты, нижний колонтитул отображается нормально, однако, когдаПанели расширения открыты, они попадают под нижний колонтитул, а нижний колонтитул больше не находится внизу страницы.

Answer 1

footer {
  margin-top:calc(5% + 60px);
  bottom: 0;
}

Это прекрасно работает для меня

Answer 2

Я решил это с помощью flex. Короче говоря, все, что мне нужно было сделать, это изменить стиль компонента <Container /> следующим образом:

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

Когда я оборачиваю вертикальные секции в гибкий контейнер и выбираю, какие из них вы хотите расширить, они автоматически занимают все доступное пространство в своем контейнере.