Javascript 无法在flex child上将高度设置为100%

我有一个相当直截了当的布局，这涉及到我的身体，本质上是页眉后的内容至少100%的高度。这在桌面断点上运行良好，但一旦我切换到移动断点，将容器设置为flex direction to column，我似乎无法使body元素达到100%高度。我尝试过使用100vh，它可以工作，但随后会破坏桌面视图的布局。此主体元素的每个父元素的高度都大于它/100%

我正在使用flexbox、样式化组件和React

有什么想法吗？谢谢

正文CSS：

  font-family: 'FuturaBold';
  box-sizing:border-box;
  color: black;

  height: 100%;

  display: flex;
  flex-direction: column;

  @media (max-width: ${Breakpoints.tablet}) {
    padding-top: 50px;
  }

父CSS：

  min-height: 100% !important;
  box-sizing: border-box;

  background-color: ${Colours.dark};

  display: flex;

  @media (max-width: ${Breakpoints.tablet}) {
    flex-direction: column;
  }

---

结合你的方法

仅在媒体查询中设置高度：100vh。这不会在桌面视图中把事情搞砸