Вопрос по bootstrap-4, twitter-bootstrap, flexbox –  -- Спасибо

0

тили довольно много часов, пытаясь понять это, и кажется, что это должно быть так просто. Веб-страница немного сложнее, но проблема сводится к этому.

Я пытаюсь создать гибкую рамку слева, которая должна содержать меню, затем «содержимое» справа, я хочу, чтобы левая оставалась неподвижной, а справа - для прокрутки вверх и вниз. Тем не менее, в настоящее время я могу просто заставить его прокручивать вертикально.

Итак, предприняли следующие шаги

Создано поле «просмотр»

<div class="container-fluid">

    <div class="row d-none d-md-block flex-nowrap wrapper boxtoview">

Так что это должно дать мне одну большую коробку, чтобы заполнить всю страницу

Тогда левый столбец

<div class="col-md-4 float-left navstyle" id="sidebar">

Тогда правая колонка

        <main class="col col-md-8 float-left col px-5 pl-md-2 pt-2 main mainview">

Что бы я ни поместил в правую колонку, оно отказывается прокручивать. Как ни странно, левую руку прокручивать

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

body {
  background: #ffffff;
  font-family: "Montserrat", sans-serif;
  height: 100%;
  overflow: hidden;
  /*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
  margin: 0px;
  /*removes default style*/
  display: flex;
  /*enables flex content for its children*/ }

.navstyle {

  font-family: "Cinzel", serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-shrink: 0; }


.flex-grow {
  flex: 1 0 auto; }



.mainview {
  align-items: flex-start;
  height: 100%;
  /*allows both columns to span the full height of the browser window*/
  display: flex;
  flex-direction: column;
  /*places the left and right headers above the bottom content*/
  flex: 1;
  overflow: scroll; }

.boxtoview {
  min-height: min-content;
  /* needs vendor prefixes */
  display: flex;
}
body {
  background: #ffffff;
  font-family: "Montserrat", sans-serif;
  height: 100%;
  overflow: hidden;
  /*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
  margin: 0px;
  /*removes default style*/
  display: flex;
  /*enables flex content for its children*/ }

.navstyle {

  font-family: "Cinzel", serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-shrink: 0; }


.flex-grow {
  flex: 1 0 auto; }



.mainview {
  align-items: flex-start;
  height: 100%;
  /*allows both columns to span the full height of the browser window*/
  display: flex;
  flex-direction: column;
  /*places the left and right headers above the bottom content*/
  flex: 1;
  overflow: scroll; }

.boxtoview {
  min-height: min-content;
  /* needs vendor prefixes */
  display: flex;
}

И HTML-страница:

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <title>Bootstrap 4 Layout</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
    <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/styles22.css">

</head>

<body>


<div class="container-fluid">

    <div class="row d-none d-md-block flex-nowrap wrapper boxtoview">
        <div class="col-md-4 float-left navstyle" id="sidebar">

            <div class="top"></div>
            <div class="navestylemenublock">
                <ul class="menulevel1">
                    <li class="">
                        <a href="">Blog</a>
                    </li>
                    <li>
                        <a href="">Projects</a>
                    </li>
                    <li>
                        <a href="">Contact</a>
                    </li>
                    <li>
                        <a href="">About</a>
                    </li>
                    <li>
                        <a href="">Search</a>
                    </li>
                </ul>
            </div>

        </div>
        <main class="col col-md-8 float-left col px-5 pl-md-2 pt-2 main mainview">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem accumsan purus blandit rutrum eu in dui. Aenean ex enim, consectetur non cursus ut, luctus vestibulum orci. Maecenas non est non nisi porttitor fringilla. Nulla accumsan, turpis ut porta suscipit, diam nisl ullamcorper justo, ut pretium orci magna at tellus. Morbi id posuere justo. Praesent dictum pellentesque lectus, quis auctor massa malesuada in. Quisque ac pretium ex. Donec eget consequat ligula. Suspendisse feugiat sapien sit amet aliquam auctor. Donec dui sapien, feugiat nec condimentum sit amet, egestas sed mi. Donec odio tellus, suscipit at eleifend sit amet, eleifend cursus elit. Fusce libero elit, congue quis ligula ac, finibus facilisis mi. Aliquam mauris turpis, posuere vitae porttitor eu, lacinia id felis. Suspendisse hendrerit mollis arcu non placerat.

            Praesent euismod dolor vel nibh condimentum, ut lacinia ex pellentesque. Vivamus aliquam, ex id sodales sodales, erat tortor tincidunt diam, quis posuere est mauris non ipsum. Ut consequat fermentum massa. Aliquam mollis, nibh ut varius faucibus, lacus leo lacinia nisi, vel maximus turpis erat non elit. Aenean quis ante non dolor sollicitudin feugiat eu ac est. Aenean fringilla ligula at est laoreet consectetur. Sed non egestas orci. Vivamus a sem ipsum. Duis et leo sit amet velit dapibus aliquam. Nullam ut eleifend nulla. Praesent metus mauris, dapibus eget posuere tincidunt, efficitur egestas erat. Praesent suscipit pellentesque venenatis. Duis ipsum metus, accumsan ac pulvinar ac, lacinia ac dolor. Vivamus dignissim mollis mauris a tempus.

            Praesent condimentum porta velit, eget dapibus purus ultrices pellentesque. Nullam ultrices et massa sit amet congue. Praesent sollicitudin posuere odio, quis ullamcorper nisi tincidunt et. Cras et facilisis ipsum. Praesent eget nisi placerat, lobortis ante quis, interdum ligula. Aliquam rutrum urna a varius volutpat. Nulla ut tincidunt ipsum, congue feugiat lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus augue mi, venenatis ut interdum in, volutpat a dui. Etiam cursus diam orci, quis fermentum magna imperdiet commodo. Vivamus at lacus ut ante mollis luctus. Fusce sit amet convallis sem. Aliquam nibh nibh, consequat eget sagittis quis, volutpat ut risus.

            Aenean porta nunc finibus, porta felis non, tempor justo. Quisque nec velit justo. Integer luctus ac massa vitae lobortis. Suspendisse tempor lobortis efficitur. Suspendisse potenti. Fusce at diam sem. Nullam ex purus, consequat id iaculis non, tincidunt a quam. Nullam interdum ut mi ut iaculis. Duis viverra tristique sodales.

            Suspendisse et enim tortor. Proin molestie a velit eget cursus. Nunc nec ultricies lacus. Maecenas varius augue vitae mauris fringilla efficitur. Sed tempus ante vitae sollicitudin ornare. Sed vitae orci nulla. Morbi metus risus, aliquet et tristique sit amet, laoreet vestibulum neque. Duis interdum varius enim, quis maximus felis pharetra et. Aliquam est enim, vehicula id convallis quis, maximus sed nibh. Maecenas imperdiet rhoncus dolor sed imperdiet. Curabitur facilisis nisi et nulla blandit dapibus. Nam rhoncus vehicula ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        </main>

    </div>

</div>





</body>
</html>
Зим, ты совершенно прав, имел ввиду вертикальное, что касается поплавка, если я уберу его, столбец исчезнет, ​​или я могу поместить его в тот же столбец, после чего второй сможет прокрутить ... vrghost

Ваш Ответ

1   ответ
2

похожие вопросы, на которые уже дан ответ, (и здесь) но я рассмотрю это для вашего сценария. Вы можете использовать один из этих вариантов.

1 - липкая боковая панель (не поддерживается во всех браузерах)

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-sm-4" id="sidebar">
            <div class="navestylemenublock sticky-top">
                ..
            </div>
        </div>
        <main class="col col-sm-8">
            .. content
        </main>
    </div>
</div>

Липкая демонстрация

2 - фиксированная боковая панель

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-md-4" id="sidebar">
            <div class="navestylemenublock">
                <ul class="menulevel1">
                    ..
                </ul>
            </div>
        </div>
         <main class="col-md offset-md-4">
            ...
        </main>
    </div>
</div>

Заposition: fixed, он должен применяться только на больших экранах, прежде чем столбцы будут располагаться вертикально.

@media (min-width: 768px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

Исправлена ​​демонстрация

Извините, пришлось немного поработать с ним, чтобы все было правильно (было много CSS, которые нужно было почистить), и немного поспать между ними. Большое спасибо, и это работает, но кажется, что он ломает подход начальной загрузки и гибкую коробку? (Эй, если это работает, я счастлив, но думаю, что это было частью моей проблемы) vrghost
Это хорошо работает, если над этими столбцами нет ничего, например, меню навигации. Есть идеи для этой ситуации? Я подключился, пытаясь различные. Вот ответвление вашей «Fixed demo», показывающее проблему:codeply.com/go/FYm5gCFJL8 -- Спасибо kgeo

Похожие вопросы