使用 Material-UI 扩展抽屉将页脚保持在底部

Question

我正在为我的 React 应用程序使用 Material-UI@next。在一个特定组件中，我使用Expansion Panels 显示项目列表。我还有一个简单的<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 />的代码sn-p：

  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

我通过使用flex 解决了这个问题。简而言之，我需要做的就是将<Container /> 组件样式更改如下：

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

当我将垂直部分包裹在 flex 容器中并选择要扩展的部分时，它们会自动占用其容器中的所有可用空间。

Answer 2

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

这对我来说很好用