Question

我想到的布局相当简单，这涉及到我的身体（基本上是标题后面的页面内容）的高度至少为100％。这在桌面断点上可以很好地工作，但是一旦我切换到移动断点（将容器的flex-direction设置为column），我似乎无法使body元素的高度为100％。我试过使用100vh，它可以工作，但随后破坏了桌面视图的布局。此body元素的每个父元素的高度都大于它的100％。

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

有什么想法吗？谢谢！

Body 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

Answer 1

结合您的方法。

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

无法在弹性子级上将高度设置为100％

1 个答案: