材质 UI 纸张元素未覆盖 100% 的视口高度答案

【问题标题】：Material UI Paper element not covering 100% of viewport height材质 UI 纸张元素未覆盖 100% 的视口高度
【发布时间】：2020-09-08 22:09:05
【问题描述】：

我有一个 Material UI <Paper> 组件，用作背景并存在于我的主要 React 组件中 - 它嵌套在 <ThemeProvider> 中，它嵌套在 <div> 中，然后嵌套在 <body> 中.我应用了viewport: 100vh 属性使其占据屏幕的整个高度。它确实占据了整个高度，但只是在右侧渲染另一个 <Paper> 组件之前。然后纸的底部不再延伸到屏幕底部：

App 渲染方法的开始：

return (
    <ThemeProvider theme={theme}>
      <Paper style={{ height: '100vh', boxShadow: 'none' }}>
        <Container fluid id='app'>
        .......
)

我尝试将viewport: 100vh 属性应用于包含index.js 中的App 组件的<div> 和index.html 中的<body> 元素。没有任何区别。值得一提的是，我目前正在为我的网格系统使用 react-bootstrap Containers/Rows/Cols（尚未将该部分切换到 Material UI），但它们都嵌套在 Paper 中，所以我没想到他们会导致问题。我还尝试删除应用于 <Container> 的任何 CSS，但没有帮助。

我还在为<ThemeProvider> 使用 muiTheme（显然）：

export default function createTheme(isDarkModeEnabled) {
    return createMuiTheme({
        palette: { 
            type: isDarkModeEnabled ? 'dark' : 'light',
            primary: {
                main: '#6DD3CE',
                dark: '#639FAB'
            },
            secondary: {
                main: '#52CBC5'
            }
        },
        typography: {
            fontFamily: [ 'montserratlight', 'Times New Roman' ].join(','),
            body2: {
                fontFamily: [ 'montserratmedium', 'Times New Roman' ].join(',')
            },
            h3: {
                fontSize: '1.75rem'
            },
            button: {
                fontFamily: [ 'montserratmedium', 'Times New Roman' ].join(',')
            }
        }
    })
}

更新及解决方案

我确实使用 flexbox 而不是 react-bootstrap 重做了我的布局，并最终通过在我的容器中使用 min-height: 100vh 而不是 height: 100vh 解决了这个问题，因此它有扩展空间。

【问题讨论】：

我怀疑您的某个容器的属性与您孩子的样式冲突。您可以提供 MRE 的任何更改（可能通过代码和框）以便我们进一步调试？
当然，抱歉这么晚才回来。如果切换暗模式，然后单击“输入文本”单选按钮，您将在屏幕底部看到问题：codesandbox.io/s/white-night-z7e7p

标签： css reactjs material-ui

【解决方案1】：

您的<Container> 似乎有一点填充，导致内容超出其高度：

这也可能是由于您的<textarea /> 没有指定高度。当您在中型屏幕中时，这是一个特殊的问题。

如果您已经打算取消 Bootstrap 的布局系统，请考虑使用 flex box 和样式化容器：

import React from "react";
import styled from "styled-components";

export default function App() {
  return (
    <Container>
      <StyledHeader>Hello StackOverflow</StyledHeader>
      <StyledCol>
        <p>This is column 1.</p>
      </StyledCol>
      <StyledCol>
        <p>This is another column.</p>
      </StyledCol>
    </Container>
  );
}

const Container = styled.div`
  height: 700px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
`;

const StyledHeader = styled.h1`
  height: 30%;
  width: 100%;
  margin: 0;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`;

const StyledCol = styled.div`

  height: 70%;
  width: 50%;
  & p {
    text-align: center;
  }

`;

代码沙盒示例：https://codesandbox.io/s/stack-63802170-flexbox-example-909ol

这最终会让您更好地控制页面的布局。

【讨论】：

很有道理，谢谢！我确实尝试向文本区域添加显式高度，但这并没有解决它。我要去学习flex box并尝试一下。在我实施后将其确认为解决方案。
两个弹性框参考来帮助你的旅程！ flexboxfroggy.com css-tricks.com/snippets/css/a-guide-to-flexbox
谢谢，这些真的很有帮助。原来主要问题是我的容器有一个“高度：100vh”的属性，使它没有扩展空间。我将其更改为“最小高度：100vh”，它现在可以扩展以容纳任何嵌套元素。
@porter3 不错！这是使用 flexbox 的一大优点。因为你“接近金属”，所以你可以找到那些奇怪的虫子。很高兴听到这有帮助！