Question

我的css出现了奇怪的行为。我正在使用材料设计，我只想要一个工具栏穿过顶部，工具栏左侧的侧边到屏幕底部。到目前为止，即使没有内容，我也会在右侧显示一个滚动条。或者我让工具栏没有延伸到屏幕的底部。最近，使用此代码：

ps ax | grep mysql

我看到一切都很好，除了它切断了我的页面底部（与工具栏占用的数量相同）。所以它就像sidenav首先在屏幕的整个高度渲染一样，然后工具栏弹出并向下推动所有东西。有人知道解决这个问题吗？

Answer 1

github上有一些问题，我还没有找到任何合适的解决方案。我做了一个快速的CSS黑客，也可能对你有所帮助：

  .mat-sidenav-content
    height calc(100% - 64px)
    @media (max-width:600px) and (orientation:portrait)
      height calc(100% - 56px)

    @media (max-width:960px) and (orientation:landscape)
      height calc(100% - 48px)

它是一个手写笔代码，您可以在sass / css中重新创建它，无论您正在使用它。

编辑：

忘记提及，我也在我的sidenav所在的父组件上使用了这个：

parent-to-sidenav
  padding-top 64px
  @media (max-width:600px) and (orientation:portrait)
    padding-top 56px

  @media (max-width:960px) and (orientation:landscape)
    padding-top 48px

无法正确组合工具栏和sidenav

1 个答案:

编辑：