时间戳

首页 > 解决方案 > 使用引导程序在嵌套的弹性框内滚动

css - 使用引导程序在嵌套的弹性框内滚动

问题描述

我正在开发一个 Angular (8.2.13) + Bootstrap (4.3.1) 应用程序，它能够显示不同的页面，其中一些有标签，而另一些没有。当内容变得大于屏幕时，我面临着与屏幕的哪个部分获得滚动条相关的各种问题。

如果可能的话，我想为这个问题找到一个仅引导程序的解决方案（没有额外的 CSS）。如果没有，那么添加尽可能少的额外 CSS 的解决方案。

这是页面的结构：

  1. 导航栏
    • 应始终位于屏幕左侧（滚动内容时切勿移动）。
    • 根据其内容使用可能的最小宽度。
    • 使用其容器的高度。
  2. 标签栏
    • 应始终位于屏幕顶部（滚动内容时切勿移动）。
    • 根据其内容使用可能的最小高度。
    • 使用其容器的宽度。
  3. 内容
    • 当高度高于其容器时应垂直滚动。
    • 使用其容器中所有剩余的宽度和高度。

我做了一个最小的例子来重现这个问题：

代码示例

JSFiddle 示例

HTML

<div class="d-flex h-100">
  <nav class="navbar flex-column justify-content-start navbar-dark bg-dark h-100 overflow-auto flex-nowrap w-100">
    <div class="navbar-nav">
      <a class="nav-item nav-link pointer">Navbar</a>
    </div>
  </nav>
  <div class="flex-grow-1 d-flex">
    <div class="col overflow-auto p-3">
      <div class="myContainer">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link">Tab 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 3</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active">
            <div class="flex-item">
              <div class="row h-10">
                <div class="col overflow-auto">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

预期行为

观察到的行为

在此处输入图像描述

我试过的东西不起作用/不可接受

编辑：更新 JSFiddle 示例中的引导版本以匹配我的应用程序中使用的版本。

标签： cssbootstrap-4scrollflexboxnested

解决方案

试试这个

body {
  overflow: hidden;
}
.inner {
  overflow-y: scroll;
  height: 100vh;
  padding-bottom: 130px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex">
  <nav class="navbar flex-column justify-content-start navbar-dark bg-dark overflow-auto flex-nowrap">
    <div class="navbar-nav" style="height: 100vh;">
      <a class="nav-item nav-link pointer">Navbar</a>
    </div>
  </nav>
  <div class="flex-grow-1 d-flex">
    <div class="col overflow-auto p-3">
      <!-- Here the container can be replaced by several others based on elements selected in the Navbar. For simple container the "overflow-auto" of the parent div is required to get the appropriate vertical scroll. Also in my application this "overflow-auto" allows to scroll vertically in this block only, but in this example the scroll is on the whole page (navbar on the left moved when scrolling, but it should be static) -->
      <div class="myContainer">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link">Tab 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 3</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active">
            <div class="flex-item">
              <div class="row">
                <!-- I wish for vertical scroll to happen on the following col and not at the "myContainer" level. I also want the content of one tab to take all remaining space on screen. So forcing the height on this col with style="height: 85vh" does work, but is not what I am looking for. -->
                <div class="col overflow-auto inner">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读