带有固定标题和 2 个侧边栏的引导程序

Question

我正在尝试创建一个带有 2 个固定边栏和标题的 bootstrap 4 布局。

问题：

目前，斗争似乎是获得正确的引导程序布局以及flexbox 或引导程序中的普通列之间的战斗。

因为一个侧边栏需要在视口的高度上工作。固定内容侧边栏也需要是视口的高度。

https://jsfiddle.net/8fkgxop1/

我想要它是什么：

代码示例：

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 3.75rem;
    padding: 0;
}

.fixed-wp {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
}

.workpackage_sidebar {
    margin-left: 3.75rem;
}

.sidebar-sticky-wp {
    position: -webkit-sticky;
    position: sticky;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    height: 100vh;
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    .feather {
        margin-right: 4px;
        color: #999;
    }
    &.active {
        color: #007bff;
    }
    &:hover .feather,
    &.active .feather {
        color: inherit;
    }
}

.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
}


/*
 * Navbar
 */

.navbar-brand {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.navbar .form-control {
    padding: 0.75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    &:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
    }
}


/*
 * Utilities
 */

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar sticky-top bg-dark flex-md-nowrap p-0" style="margin-left: 3.75rem;">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
</nav>
<nav class="bg-light sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span data-feather="home"></span> Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file"></span> Orders
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="shopping-cart"></span> Products
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="users"></span> Customers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="bar-chart-2"></span> Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="layers"></span> Integrations
                </a>
            </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
    			<span>Saved reports</span>
    			<a class="d-flex align-items-center text-muted" href="#">
    				<span data-feather="plus-circle"></span>
    			</a>
    		</h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Current month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Last quarter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span> Social engagement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 workpackage_sidebar">
            <div class="affix">
                <div class="sidebar-sticky-wp">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                </div>
            </div>
        </div>

        <main role="main" class="col-md-9 col-lg-offset-3">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h2">Dashboard</h1>
            </div>

            <canvas class="my-4" id="myChart" width="900" height="380"></canvas>

            <h2>Section title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
        </main>
    </div>
</div>

Answer 1

@Alessio 的回答是 100% 有效的，但它使用 position 来实现目标，我使用 height 的概念来 achieve 那个东西。

我在main tag 中添加了main_right 类并添加了一些CSS。

.workpackage_sidebar {
    padding-left: 3.75rem;
    max-height: calc(100vh - 48px);
    overflow-y: scroll;
}

.main_right {
    max-height: calc(100vh - 48px);
    overflow-y: scroll;
}

解释

1 为什么要从 100vh 中减去 48px？

• 它从您的主要高度中减去，因为您的 navigation bar 高度为 48 像素。

2 我在侧边栏中使用了margin，你为什么使用padding？

• 在您的情况下，边距从flexbox 中删除内联行为，所以我转换为padding。

小提琴

https://jsfiddle.net/2mg93tak/

片段

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 3.75rem;
    padding: 0;
}

.fixed-wp {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
}

.workpackage_sidebar {
    padding-left: 3.75rem;
    max-height: calc(100vh - 48px);
    overflow-y: scroll;
}

.main_right {
    max-height: calc(100vh - 48px);
    overflow-y: scroll;
}

.sidebar-sticky-wp {
    position: -webkit-sticky;
    position: sticky;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    height: 100vh;
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    .feather {
        margin-right: 4px;
        color: #999;
    }
    &.active {
        color: #007bff;
    }
    &:hover .feather,
    &.active .feather {
        color: inherit;
    }
}

.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
}


/*
 * Navbar
 */

.navbar-brand {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.navbar .form-control {
    padding: 0.75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    &:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
    }
}


/*
 * Utilities
 */

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar sticky-top bg-dark flex-md-nowrap p-0" style="margin-left: 3.75rem;">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
</nav>
<nav class="bg-light sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span data-feather="home"></span> Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file"></span> Orders
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="shopping-cart"></span> Products
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="users"></span> Customers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="bar-chart-2"></span> Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="layers"></span> Integrations
                </a>
            </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
      <span>Saved reports</span>
      <a class="d-flex align-items-center text-muted" href="#">
        <span data-feather="plus-circle"></span>
      </a>
    </h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Current month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Last quarter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span> Social engagement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 workpackage_sidebar">
            <div class="affix">
                <div class="sidebar-sticky-wp">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                </div>
            </div>
        </div>

        <main role="main" class="col-md-9 col-lg-offset-3 main_right">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h2">Dashboard</h1>
            </div>

            <canvas class="my-4" id="myChart" width="900" height="380"></canvas>

            <h2>Section title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
        </main>
    </div>
</div>

Answer 2

首先让我们进入 HTML 代码，您必须将“CONTAINER - 可滚动 - 未固定” div 类更改为：col-md-6 offset-lg-3

<main role="main" class="col-md-6 offset-lg-3">

所以所有东西都不会被 flexbox 包裹起来。

现在，让我们来看看 CSS 吧！

关于“固定内容滚动条”：

.container-fluid .workpackage_sidebar {
  height: calc(100vh - 60px);
  overflow: auto;
  position: fixed;
  top: 60px;
  left: 0;
  padding-bottom: 60px;
}

属性：height:calc(100vh - 60px)，结合overflow:auto;设置元素高度为100%（不包括从顶部得到的60px财产） 并使其可滚动。

关于“CONTAINER - 可滚动 - 未修复”：

.container-fluid .offset-lg-3 {
  margin-left: calc(25% + 60px);
}

由于同级元素边距（.workpackage_sidebar {margin-left: 3.75rem;}），您必须添加 60 个额外像素。

这是一个有效的 CodePen：https://codepen.io/alezuc/pen/bGVEWvG

希望这会有所帮助！