Question

https://plnkr.co/edit/FvCTLHHfQA9KNAlfVYAP?p=preview

<clr-main-container>
 <div class="content-container">
  <div class="content-area">
   <div class="row">
    <div class="col-xs-9" style="height:100%; border-right: 1px solid rgb(204, 204, 204); padding-right:0; overflow-y: auto;">
      <div class="container">
        left column
        <clr-tabs (clrTabsCurrentTabLinkChanged)="onTabSelected($event)" (clrTabsCurrentTabIndexChanged)="onTabIndexChanged($event)" (clrTabsCurrentTabContentChanged)="onTabContentActivated($event)">
          <clr-tab-link [clrTabLinkActive]="true">Tab 1</clr-tab-link>
            <clr-tab-content [clrTabContentActive]="true" style="overflow-y: auto;"> 
              SOME VERY LONG CONTENT THAT EXCEEDS 100vh in height;
            </clr-tab-content>
          <clr-tabs>
        </div>
    </div>
    <div class="col-xs">
      right column
    </div>
   </div>
  </div>
 </div>
</clr-main-container>

我正在尝试实现一个布局，使得我的html文档的高度始终为100vh，如果特定选项卡的内容超过该高度，那么它应该滚动而不是超过长度。但是，在我的实现中，滚动行为将应用于整个页面，而不仅仅是选项卡内容。

有什么更好的方法可以做到这一点？我已经能够确定手动设置高度值到我的内容正确设置滚动行为，但是，我不认为手动设置高度是设计此布局的最佳方式。如果我的内容div知道父母的高度并一直伸展到底部，也许这可能解决我的问题。我不太确定。

Answer 1

https://github.com/jamesflorentino/nanoScrollerJS

https://jamesflorentino.github.io/nanoScrollerJS/

有许多滚动插件，但您必须为手机测试它。

在网页的特定部分设置滚动

1 个答案: