Question

我花了2天的时间来研究这个问题。怜悯并结束我的痛苦。我知道我要踢自己。

我正在使用Bootstrap 4.1和Angular。我有一个“典型”布局，在包含侧边栏和主要内容的行的顶部具有固定的标题。我希望侧边栏和主要内容彼此独立滚动，并且标题永远不滚动。我想使用最新的“最佳实践”，而不在乎过时的浏览器。

我可以使侧边栏和内容独立滚动，但是它们并没有从其大小中除去页眉的高度，因此我在折叠下面滚动。

我从标准CSS开始：

html, body {
  height: 100vh;
  margin: 0;
  //so header stays put
  overflow: hidden;
}

在我的index.html中，我有：

<body >
  <app-root ></app-root>
...

应用程序根调用了我的主要组件：

<!--security check happens here and routes appropriately-->
<div class="container-fluid h-100" >

<!-- header -->
  <router-outlet name="header"></router-outlet>

  <!-- row to hold sidebar and main content -->
  <div class="row no-gutter h-100" >

    <!-- sidebar -->
    <div class="col-auto h-100" >
      <router-outlet name="sbactions" ></router-outlet>
    </div>

    <!-- primary content -->
    <div class="col h-100 tab-content">
      <router-outlet ></router-outlet>
    </div>
  </div>
</div>

我的理解是，我应该能够通过Bootstrap 4.x做到这一点，而无需我进行任何计算，并且神奇的h-x类将解决所有问题。

建议？预先感谢！

带有固定标头的h-100无法使用溢出

0 个答案: