Bootstrap 2 个 div 上的 4 个滚动条并排固定和流动宽度
Bootstrap 4 scrollbars on 2 divs side-by-side fixed and fluid width
我正在尝试设计一个简单的仪表板页面。
我首先将两个 div 并排放在一起，用作侧边菜单和内容。该页面如下所示：
我注意到滚动条 (y) 不可见，尽管该页面的内容比可见内容多。
是的，您仍然可以滚动 down/up，但令人困惑的是为什么看不到滚动条。
我正在尝试使用 bootstrap 4，但我也有自定义的 css。
您认为问题是什么？更重要的是，有没有更好的方法使用 bootstrap 4?
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
使用此代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody" style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
您需要在 div 标签中添加 css style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;"
滚动不可见，因为您将宽度设为主体的 100%，并将 div 右侧推 250 像素，并将填充右侧 250 像素；
所以主要是内容溢出到右边了。
你必须这样做
#mainContents {
height: 100%;
width: 100%;
padding-left: 250px;
position: fixed;
z-index: -1;
top: 0px;
background-color: #ECF0F5;
overflow-x: hidden;
overflow-y: auto;
transition: 0.3s;
}
它将解决您的问题
从#mainContents 样式中删除以下内容
width: 100%;
padding-right: 250px;
那你的风格就是这样
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
整个页面代码如下。请查收
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
这会是一种更简单、Bootstrap 友好的方法...
https://www.codeply.com/go/y4HsWA8VA2
<div class="container-fluid">
<div class="row">
<div class="sidebar col">Sidebar</div>
<div class="main col">
..
</div>
</div>
</div>
.sidebar {
width: 250px;
min-height: 100vh;
position: fixed;
}
.main {
padding-left: 265px;
}
我正在尝试设计一个简单的仪表板页面。
我首先将两个 div 并排放在一起，用作侧边菜单和内容。该页面如下所示：
我注意到滚动条 (y) 不可见，尽管该页面的内容比可见内容多。
是的，您仍然可以滚动 down/up，但令人困惑的是为什么看不到滚动条。
我正在尝试使用 bootstrap 4，但我也有自定义的 css。
您认为问题是什么？更重要的是，有没有更好的方法使用 bootstrap 4?
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
使用此代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody" style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
您需要在 div 标签中添加 css style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;"
滚动不可见，因为您将宽度设为主体的 100%，并将 div 右侧推 250 像素，并将填充右侧 250 像素；
所以主要是内容溢出到右边了。
你必须这样做
#mainContents {
height: 100%;
width: 100%;
padding-left: 250px;
position: fixed;
z-index: -1;
top: 0px;
background-color: #ECF0F5;
overflow-x: hidden;
overflow-y: auto;
transition: 0.3s;
}
它将解决您的问题
从#mainContents 样式中删除以下内容
width: 100%;
padding-right: 250px;
那你的风格就是这样
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
整个页面代码如下。请查收
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
<p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
<p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
</div>
</div>
</body>
</html>
这会是一种更简单、Bootstrap 友好的方法...
https://www.codeply.com/go/y4HsWA8VA2
<div class="container-fluid">
<div class="row">
<div class="sidebar col">Sidebar</div>
<div class="main col">
..
</div>
</div>
</div>
.sidebar {
width: 250px;
min-height: 100vh;
position: fixed;
}
.main {
padding-left: 265px;
}