Bootstrap 4 flexbox 中的固定和可滚动列

Question

Bootstrap 4 flexbox 中的固定和可滚动列

vrg*_*ost 1 flexbox twitter-bootstrap bootstrap-4

花了好几个小时试图弄清楚这个问题，看起来它应该如此简单。网页有点复杂，但问题归结为这个。

我正在尝试在左侧创建一个包含菜单的弹性框，然后在右侧创建一个“内容”，我希望左侧保持静止，右侧则上下滚动。但是，目前我只能让它垂直滚动。

于是采取了以下步骤

创建了“视图”框

<div class="container-fluid">

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

Run Code Online (Sandbox Code Playgroud)

所以这应该给我一个大盒子来填满整个页面

然后是一个左列

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

Run Code Online (Sandbox Code Playgroud)

然后右列

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

Run Code Online (Sandbox Code Playgroud)

无论我在右栏中放什么，它都拒绝滚动。奇怪的是，左手会滚动

当我从阅读大量的职位的理解，我应该把滚动的页面，然后告诉具体的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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Zim*_*Zim 7

有说已经回答了类似的问题，（在这里），但我会解决它为您的方案。您可以使用这些选项之一。

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>

Run Code Online (Sandbox Code Playgroud)

粘性演示

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>

Run Code Online (Sandbox Code Playgroud)

对于position: fixed，它应该只在列垂直堆叠之前应用于大屏幕。

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

Run Code Online (Sandbox Code Playgroud)

固定演示

归档时间：	7 年，8 月前
查看次数：	10328 次
最近记录：	7 年，8 月前