组件之间的可滚动响应内容

Question

我正在尝试制作一个具有标题、内容和两个按钮的移动响应式服务条款页面。要求是：

• 组件不得超过视口的 100%，以便内容可滚动
• 按钮很粘（底部）
• 如果内容很短，则必须在标题下方，而不是在中间
• 该页面首先适合移动设备（横向和纵向）

我已经完成了大部分。使用设备工具栏，我可以在移动设备（横向和纵向）中查看它。问题是，如果切换到横向，组件会超过 100% 的高度。我尝试使用flexGrow，但它似乎不起作用，所以我现在的解决方法是指定不理想的高度以使其响应。

参考：div with 3 rows and scrollable content at the middle

这是一个独立的示例：https://stackblitz.com/edit/react-em99kh?file=src/App.js

App.js

const App = () => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        height: '100vh',
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            alignContent: 'center',
            mb: 3,
            mt: 3,
          }}
        >
          <Typography variant="h3">{'Terms of Service'}</Typography>
        </Box>
        <Box
          sx={{
            display: 'flex',
            overflow: 'scroll',
            //Don't want to specify height
            height: '70vh',
            //flexgrow does nothing even if height is removed
            flexGrow: 1,
          }}
        >
          <Typography variant="body1">{data()}</Typography>
        </Box>
      </Box>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          mb: 3,
          mt: 3,
        }}
      >
        <Button
          id="decline-btn"
          color="primary"
          variant="outlined"
          sx={{
            borderRadius: 16,
            width: '47%',
            height: '50px',
          }}
        >
          {'Decline'}
        </Button>
        <Button
          id="accept-btn"
          color="primary"
          variant="contained"
          sx={{
            borderRadius: 16,
            width: '47%',
            height: '50px',
          }}
        >
          {'Accept'}
        </Button>
      </Box>
    </Box>
  );
};

export default App;

Answer 1

您可能应该重新组织一下页面，然后内容部分应该有一个flex: 1 而不是height: 70vh。现在你的 flex-grow 什么都不做，因为 fly-grow 的父 div 不是 100vh 的那个，而是它的没有定义高度的孩子。

尝试拥有这棵树：

Main div: 100vh - no scroll
 Title Box
 content div: flex-1 scrollable
 Buttons Box

无法测试，但应如下所示：

const App = () => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        height: '100vh',
      }}
    >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            alignContent: 'center',
            mb: 3,
            mt: 3,
          }}
        >
          <Typography variant="h3">{'Terms of Service'}</Typography>
        </Box>
        <Box
          sx={{
            display: 'flex',
            overflow: 'scroll',
            flexGrow: 1,
          }}
        >
          <Typography variant="body1">{data()}</Typography>
        </Box>

      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          mb: 3,
          mt: 3,
        }}
      >
        <Button
          id="decline-btn"
          color="primary"
          variant="outlined"
          sx={{
            borderRadius: 16,
            width: '47%',
            height: '50px',
          }}
        >
          {'Decline'}
        </Button>
        <Button
          id="accept-btn"
          color="primary"
          variant="contained"
          sx={{
            borderRadius: 16,
            width: '47%',
            height: '50px',
          }}
        >
          {'Accept'}
        </Button>
      </Box>
    </Box>
  );
};

export default App;