Bootstrap с фиксированным заголовком и 2 боковыми панелями - PullRequest
Новая
       12

Bootstrap с фиксированным заголовком и 2 боковыми панелями

2 голосов
/ 15 апреля 2020

Я пытаюсь создать макет bootstrap 4 с двумя фиксированными боковыми панелями и заголовками.

Проблема :

На данный момент Кажется, что борьба заключается в получении правильного макета bootstrap и битвы между flexbox или просто обычными столбцами из bootstrap.

Поскольку одна боковая панель должна работать по высоте порта просмотра. Боковая панель с фиксированным содержимым также должна быть высотой порта просмотра.

https://jsfiddle.net/8fkgxop1/

То, что я хочу, чтобы это было :

Example

Примеры кодов : 

.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>

Ответы [ 2 ]

2 голосов
/ 15 апреля 2020

@ Ответ Алессио действителен на 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 Почему 48px вычитается из 100vh?

  • Вычитается из ваш основной рост, потому что ваш navigation bar рост составляет 48 пикселей.

2 Я использовал margin на своей боковой панели, почему вы используете padding?

  • Маржа удалить встроенное поведение с flexbox в вашем случае, поэтому я конвертирую в padding.

FIDDLE

https://jsfiddle.net/2mg93tak/

SNIPPET 

.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 голосов
/ 15 апреля 2020

Прежде всего давайте разберемся в коде HTML, вам нужно изменить классы div "CONTAINER - scrollable - NOT FIXED" на: col-md-6 offset-lg-3 

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

Так что все не будет упаковано во flexbox.

Теперь давайте перейдем к CSS stuff!

Относительно "полосы прокрутки фиксированного содержимого": 

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

Свойство: высота: кал c (100vh - 60px) в сочетании с переполнение: авто; установить высоту элемента на 100% (исключая 60px из свойства top) и сделать его прокручиваемым.

Относительно «КОНТЕЙНЕРА - прокручиваемого - НЕ ИСПРАВЛЕНО»: 

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

Вы должны добавить 60 дополнительных пикселей из-за поля родственного элемента (.workpackage_sidebar {margin-left: 3.75rem;}).

Вот рабочий CodePen: https://codepen.io/alezuc/pen/bGVEWvG

Надеюсь, это поможет!

...