文章/答案/技术大牛

发布

社区首页 >问答首页 >带有固定头和2个边栏的引导程序

问带有固定头和2个边栏的引导程序
EN

Stack Overflow用户

提问于 2020-04-15 16:40:53

回答 2查看 75关注 0票数 2

我试图创建一个引导4布局与2个边栏是固定的，以及标题。

问题：

目前，斗争似乎得到了正确的引导布局和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>

html

css

twitter-bootstrap

bootstrap-4

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-15 17:10:22

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

我在main_right中添加了main tag类，并添加了一些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为什么从100 Why减去48 is？

从主高度减去

，因为navigation bar的高度是48 It.

。

我在侧边栏中使用了margin，为什么要使用padding

在您的示例中，从padding.中删除内联行为，因此我将转换为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>

票数 2

Stack Overflow用户

发布于 2020-04-15 16:57:55

首先，让我们进入HTML代码，您必须将“容器-滚动-不是固定的”div类更改为: col-md-6偏移量-lg-3。

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

所以所有的东西都不会被柔性盒包裹。

现在，让我们进入CSS的东西！

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

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

属性: height: calc(100 it 60 It)，再加上overflow: auto；将元素高度设置为100% (不包括顶部属性中的60 it)，并使其可滚动。

关于“容器-可滚动-不固定”：

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

您必须增加60个额外的像素，因为兄弟元素边距(.workpackage_sidebar {边距-左: 3.75rem;})。

下面是一个工作的CodePen：https://codepen.io/alezuc/pen/bGVEWvG

希望这能有所帮助！

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61234024

复制

相似问题

问带有固定头和2个边栏的引导程序
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有固定头和2个边栏的引导程序EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有固定头和2个边栏的引导程序
EN