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

【问题标题】：Can't set height to 100% on flex child无法在 flex child 上将高度设置为 100%
【发布时间】：2019-02-02 14:38:16
【问题描述】：

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

我正在使用 flexbox、styled-components 和 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;
  }

Picture here

【问题讨论】：

标签： javascript css reactjs flexbox styled-components

【解决方案1】：

结合你的方法。

仅在媒体查询中设置height: 100vh。这不会在桌面视图中搞砸

【讨论】：