Bootstrap 4 flexbox中的固定和可滚动列
问题描述：
花了好几个小时试图弄清楚这一点，看来它应该是如此简单.网页稍微复杂一点，但是问题可以归结为这一点.
Have spent quite a few hours trying to figure this one out, and it seems like it should be so simple. The webpage is a bit more complex, but the issue boils down to this.
我试图在左侧创建一个伸缩框，其中应包含菜单，然后在右侧创建一个内容"框，我希望左侧的框保持静止，而右侧的框向上和向下滚动.但是，目前，我只能使其垂直滚动.
I am trying to create a flex box to the left that should contain the menu, then a "content" one to the right, I want the left one to stay still, and right one to scroll up and down. However, currently I can just get it to scroll vertically.
因此采取了以下步骤
创建了视图"框
<div class="container-fluid">
<div class="row d-none d-md-block flex-nowrap wrapper boxtoview">
所以应该给我一个大盒子来填满整个页面
So that should give me one big box to fill the whole page
然后在左列
<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">
无论我在右栏中输入什么内容，它都不会滚动. 奇怪的是，左手会滚动
Whatever I put in the right column, it refuses to scroll. Strangely enough, the left hand one will scroll
据我了解从阅读大量的文章中，我应该把滚动的页面，然后告诉具体的div是要滚动作为一列，但它似乎非常不高兴这样做.这是CSS
As I understand it from reading numerous posts, I should turn of scrolling for page, then tell the specific div that is should scroll as a column, but it seems awfully unhappy to do so. Here is the 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>
答
有此处)，但我会针对您的情况进行解决.您可以使用以下选项之一.
There are similar questions that have already been answered, (and here) but I will address it for your scenario. You can use one of these options.
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，应仅在大屏幕上垂直放置列之前应用
For position: fixed, it should be only applied on large screens before the columns stack vertically.
@media (min-width: 768px) {
#sidebar {
position: fixed;
top: 0;
bottom: 0;
}
}