花了几个小时试图弄清楚这个，看起来应该这么简单。网页有点复杂，但问题归结为此。
我正在尝试在左侧创建一个包含菜单的弹性框，然后在右边创建一个“内容”，我希望左边的一个保持静止，右边的一个向上和向下滚动。但是，目前我可以让它垂直滚动。
所以采取了以下步骤
创建了“视图”框
<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>
答案 0 :(得分：2)
有similar questions that have already been answered，（and here），但我会针对您的方案解决这个问题。您可以使用以下选项之一。
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;
}
}