我正在尝试使用Codeply Example的侧边栏。
我想要一个可正常使用的滚动条。
我想要侧边栏，如w3schools侧栏中所示-我还为该问题添加了屏幕截图。
该示例使用的是 Bootstrap 4.3.1 。因此，任何帮助将不胜感激。我也不想妨碍页脚的外观。我正在使用Expected sidebar
寻找任何可行的解决方案
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});body, html {
height:100%;
}
/*
* Off Canvas sidebar at medium breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF=8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 col-lg-2 sidebar-offcanvas bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 pt-5 mt-3">
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item">
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Reports▾</a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="">Report 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Report 2</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="#">Export</a></li>
<li class="nav-item"><a class="nav-link" href="#">Snippets</a></li>
<li class="nav-item"><a class="nav-link" href="#">Flexbox</a></li>
<li class="nav-item"><a class="nav-link" href="#">Layouts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Templates</a></li>
<li class="nav-item"><a class="nav-link" href="#">1 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">2 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">3 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">4 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">5 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">6 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">7 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">8 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">9 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">10 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">11 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">12 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">13 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">14 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">15 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">16 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">17 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">18 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">19 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">20 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">21 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">22 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">23 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">24 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">25 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">26 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">27 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">28 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">29 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">30 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">31 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">32 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">33 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">34 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">35 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">36 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">37 Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">38 Themes</a></li>
</ul>
</div>
<!--/col-->
<div class="col main pt-5 mt-3">
<h1 class="display-4 d-none d-sm-block">
Bootstrap 4 Dashboard
</h1>
<p class="lead d-none d-sm-block">Plus off-canvas sidebar, based on Bootstrap v4</p>
<div class="alert alert-warning fade collapse" role="alert" id="myAlert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>Holy guacamole!</strong> It's free.. this is an example theme.
</div>
<div class="row mb-3">
<div class="col-xl-3 col-sm-6 py-2">
<div class="card bg-success text-white h-100">
<div class="card-body bg-success">
<div class="rotate">
<i class="fa fa-user fa-4x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-4">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-danger h-100">
<div class="card-body bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-4">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-info h-100">
<div class="card-body bg-info">
<div class="rotate">
<i class="fa fa-twitter fa-4x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-4">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-warning h-100">
<div class="card-body">
<div class="rotate">
<i class="fa fa-share fa-4x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-4">36</h1>
</div>
</div>
</div>
</div>
<!--/row-->
<hr>
<div class="row placeholders mb-3">
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/dddddd/fff?text=1" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Responsive</h4>
<span class="text-muted">Device agnostic</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/e4e4e4/fff?text=2" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Frontend</h4>
<span class="text-muted">UI / UX oriented</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/d6d6d6/fff?text=3" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>HTML5</h4>
<span class="text-muted">Standards-based</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/e0e0e0/fff?text=4" class="center-block img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Framework</h4>
<span class="text-muted">CSS and JavaScript</span>
</div>
</div>
<a id="features"></a>
<hr>
<p class="lead mt-5">
Are you ready for Bootstap 4? It's the 4th generation of this popular responsive framework. Bootstrap 4 will include some interesting
new features such as flexbox, 5 grid sizes (now including xl), cards, `em` sizing, CSS normalization (reboot) and larger font
sizes.
</p>
<div class="row my-4">
<div class="col-lg-3 col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/740x180/bbb/fff?text=..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Layouts</h4>
<p class="card-text">Flexbox provides simpler, more flexible layout options like vertical centering.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card card-inverse bg-inverse mt-3">
<div class="card-body">
<h3 class="card-title">Flexbox</h3>
<p class="card-text">Flexbox is now the default, and Bootstrap 4 supports SASS out of the box.</p>
<a href="#" class="btn btn-outline-secondary">Outline</a>
</div>
</div>
</div>
<div class="col-lg-9 col-md-8">
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Label</th>
<th>Header</th>
<th>Column</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>responsive</td>
<td>bootstrap</td>
<td>cards</td>
<td>grid</td>
</tr>
<tr>
<td>1,002</td>
<td>rwd</td>
<td>web designers</td>
<td>theme</td>
<td>responsive</td>
</tr>
<tr>
<td>1,003</td>
<td>free</td>
<td>open-source</td>
<td>download</td>
<td>template</td>
</tr>
<tr>
<td>1,003</td>
<td>frontend</td>
<td>developer</td>
<td>coding</td>
<td>card panel</td>
</tr>
<tr>
<td>1,004</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>mobile-first</td>
<td>design</td>
</tr>
<tr>
<td>1,005</td>
<td>navbar</td>
<td>sticky</td>
<td>jumbtron</td>
<td>header</td>
</tr>
<tr>
<td>1,006</td>
<td>collapse</td>
<td>affix</td>
<td>submenu</td>
<td>flexbox</td>
</tr>
<tr>
<td>1,007</td>
<td>layout</td>
<td>examples</td>
<td>themes</td>
<td>grid</td>
</tr>
<tr>
<td>1,008</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>flexbox</td>
<td>design</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/main col-->
</div>
</div>
<!--/.container-->
<footer class="container-fluid">
<section class="footers bg-light pt-5 pb-3">
<div class="container pt-5">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 footers-one">
<div class="footers-logo">
<img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;">
</div>
<div class="footers-info mt-3">
<p>Cras sociis natoque penatibus et magnis Lorem Ipsum tells about the compmany right now the best.</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-2x social"></i></a>
<a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-2x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i></a>
<a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-two">
<h5>Essentials </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Search</a></li>
<li><a href="contact.html">Sell your Car</a></li>
<li><a href="about.html">Advertise with us</a></li>
<li><a href="about.html">Dealers Portal</a></li>
<li><a href="about.html">Post Requirements</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-three">
<h5>Information </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Register Now</a></li>
<li><a href="contact.html">Advice</a></li>
<li><a href="about.html">Videos</a></li>
<li><a href="about.html">Blog</a></li>
<li><a href="about.html">Services</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-four">
<h5>Explore </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">News</a></li>
<li><a href="contact.html">Sitemap</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Feedbacks</a></li>
<li><a href="about.html">User Agreement</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-five">
<h5>Company </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Career</a></li>
<li><a href="about.html">For Parters</a></li>
<li><a href="about.html">Terms</a></li>
<li><a href="about.html">Policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="disclaimer bg-light border">
<div class="container">
<div class="row ">
<div class="col-md-12 py-2">
<small>
Disclaimer: Element Limited is only an intermediary offering its platform to facilitate the transactions between Seller and Customer/Buyer/User and is not and cannot be a party to or control in any manner any transactions between the Seller and the Customer/Buyer/User. All the offers and discounts on this Website have been extended by various Builder(s)/Developer(s) who have advertised their products. Element is only communicating the offers and not selling or rendering any of those products or services. It neither warrants nor is it making any representations with respect to offer(s) made on the site. Element Limited shall neither be responsible nor liable to mediate or resolve any disputes or disagreements between the Customer/Buyer/User and the Seller and both Seller and Customer/Buyer/User shall settle all such disputes without involving Element Limited in any manner.
</small>
</div>
</div>
</div>
</section>
<section class="copyright border">
<div class="container">
<div class="row text-center">
<div class="col-md-12 pt-3">
<p class="text-muted">© 2018 xyz Software Pvt. Ltd.</p>
</div>
</div>
</div>
</section>
</footer>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<p>This is a dashboard layout for Bootstrap 4. This is an example of the Modal component which you can use to show content.
Any content can be placed inside the modal and it can use the Bootstrap grid classes.</p>
<p>
<a href="https://www.codeply.com/go/KrUO8QpyXP" target="_ext">Grab the code at Codeply</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary-outline" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：0)
在vh-100上使用高度实用程序类row。然后h-100 overflow-auto位于内部col ...
<div class="row row-offcanvas row-offcanvas-left vh-100">
<div class="col-md-3 col-lg-2 sidebar-offcanvas h-100 overflow-auto bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 pt-5 mt-3">
...
</ul>
</div>
<div class="col main pt-5 mt-3 h-100 overflow-auto">
.... main content...
</div>
</div>
您还可以防止身体溢出...
body, html {
height:100%;
overflow: hidden;
}
演示（滚动边栏）：https://codeply.com/p/ru2u3C9XbM
EDIT
关于布局和侧边栏，有很多选择，因此没有一个“一刀切”的答案。您需要精打细算，并调整上面的示例，以回答使侧栏可滚动的原始问题。页脚是一个单独的问题。要创建粘性页脚，请对布局进行适当的调整...
演示（滚动边栏+页脚）：https://codeply.com/p/T5fR777lmD