新的引导程序和使用alpha版本的bootstrap 4为我的家庭网络创建一个站点。
我希望侧栏填充页面的整个左侧，从顶部导航栏下方开始。现在顶部导航栏和侧边栏之间有一个20个左右的像素间隙。尽管页面很大，我还是希望它能一直向下。
我使用bootstrap中的管理模板并将其修改为我的需要。
https://jsfiddle.net/ced6ee78/
CSS：
body, html {
height: 100%;
}
body {
padding-top: 70px;
}
/* BrandName Top Navbar */
.so-navbar-top {
background-color: #087ca7;
height: 48px;
}
.so-navbar-top .navbar-brand {
font-size: 1.5em;
}
.so-navbar-top .nav-item {
font-size: 0.75em;
}
/* BrandName Sidebar */
.so-sidebar {
background-color: #13293d;
}
/* workaround modal-open padding issue */
body.modal-open {
padding-right: 0 !important;
}
#sidebar {
padding-left:0;
}
/*
* Off Canvas at medium breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 48em) {
.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-block .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-block .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);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/brandname/css/style.css" rel="stylesheet">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/jquery-ui/jquery-ui.min.js"></script>
<title>Dashboard | BrandName</title>
</head>
<body>
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light bg-fade mb-3 so-navbar-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-row d-flex">
<a class="navbar-brand mb-1" href="#" title="ServiceOps">BrandName</a>
<button type="button" class="hidden-md-up navbar-toggler" data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-bell-o"></i><span class="badge badge-pill badge-danger">1</span> Alerts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-cog"></i> Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-user"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-sign-out"></i> Logout
</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 so-sidebar" id="sidebar" role="navigation">
<ul class="nav flex-column pl-1">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item">
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Sites</a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="">Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Item 2</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-md-9 col-lg-10 main">
<!--toggle sidebar button
<p class="hidden-md-up">
<button type="button" class="btn btn-primary-outline btn-sm" data-toggle="offcanvas"><i class="fa fa-chevron-left"></i> Menu</button>
</p>-->
<h1 class="display-2 hidden-xs-down">Dashboard</h1>
<div class="row mb-3">
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-success">
<div class="card-block bg-success">
<div class="rotate">
<i class="fa fa-user fa-5x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-1">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-danger">
<div class="card-block bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-1">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-info">
<div class="card-block bg-info">
<div class="rotate">
<i class="fa fa-twitter fa-5x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-1">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-warning">
<div class="card-block bg-warning">
<div class="rotate">
<i class="fa fa-share fa-5x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-1">36</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p class="text-right small">©2017 BrandName</p>
</footer>
</body>
</html>
答案 0 :(得分：0)
padding-top上的 body应与导航栏的高度相同。
在这种情况下：
body { padding-top: 48px; }
如果左侧导航和主要内容区域中的内容需要更多间距，请将填充/边距添加到.so-sidebar和.main。
答案 1 :(得分：0)
padding-top: 70px;引起的，这导致除了固定标题之外的所有内容都是从页面顶部70px开始。 您需要此规则来阻止所有其他元素从固定标题后面开始，但是，为了防止任何间隙，请为其提供标题的确切高度。
padding-top: 48px;
100vh的最小高度减去正文的填充（标题的高度）你可以使用CSS3的calc()：
min-height: calc(100vh - 48px);
使用此布局，您可以将页脚与应用程序的其余部分放在一起，以防止它出现在侧边栏下方。
另一个选项是将position: fixed添加到侧边栏，并添加填充/边距，以便其余元素不重叠。