Question

我正在使用Material-UI @ next for React app。在一个特定组件中，我使用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 />的代码段：

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

这对我来说很好

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

1 个答案: