我的侧边栏没有网页的完整高度，这是我的问题。试图解决这个问题几个小时但不能......有人可以告诉我如何解决这个问题吗？
body, html {
height: 100%;
}
.navbar-inverse {
background-color: #455a64;
color: #f7f6f6;
vertical-align: middle;
height: 50px;
line-height: 50px;
font-size: 16px;
}
nav .col-sm-2 a {
color: #f7f6f6;
margin-left: 40%;
}
hr {
border-top: 1px solid #aaaaaa;
}
nav .col-sm-2 a:hover {
color: #ebebeb;
text-decoration: none;
}
.container-fluid .row .col-sm-2 {
margin-top: -30px;
background-color: #455a64;
height: 100%;
}
.navbar {
margin-bottom: 0;
border-bottom: 0;
}
.container-fluid .row .col-sm-2 a {
color: #ebebeb;
font-size: 16px;
}
.container-fluid .row .col-sm-2 a:hover {
color: #26c6da;
text-decoration: none;
}
.active {
color: #26c6da!important;
text-decoration: none;
}
.glyphicon {
margin-bottom: 30px;
padding-right: 15px;
}
.glyphicon-menu-right {
float: right;
}
.glyphicon-menu-left {
float: right;
}
#panel {
margin-top: 20px;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creator CRM</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="../css/admin.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top"></nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<hr>
<a href="../index.html"><span class="glyphicon glyphicon-home"></span> Homepage <span class="glyphicon glyphicon-menu-right"></span></a><br>
<a class="active" href="index.html"><span class="glyphicon glyphicon-lock"></span> Modules <span class="glyphicon glyphicon-menu-left"></span></a><br>
<span class="title">Installed modules<hr></span>
<a href="#"><span class="glyphicon glyphicon-th-list"></span> Users management <span class="glyphicon glyphicon-menu-right"></span></a><br>
</div>
<div class="col-sm-10">
<div id="panel">
<div class="panel panel-default">
<div class="panel-heading">Your current plan: <strong>Free</strong> <button class="btn btn-blue">Upgrade your plan to install more modules!</button></div>
<div class="panel-body">
L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>在上面添加了我的代码。对于更大的屏幕，您可能看不到该错误。所以我也留个图:
在此先感谢您的帮助!:)
P.S 在整个页面中打开以更好地查看问题，因为它未在较小的设备上实现。
最佳答案
您可以在父级上使用 flex，并从侧边栏中删除 height 属性，因为默认情况下高度将“拉伸(stretch)”以匹配父级的高度。
.flex {
display: flex;
}
body,
html {
height: 100%;
}
.navbar-inverse {
background-color: #455a64;
color: #f7f6f6;
vertical-align: middle;
height: 50px;
line-height: 50px;
font-size: 16px;
}
nav .col-sm-2 a {
color: #f7f6f6;
margin-left: 40%;
}
hr {
border-top: 1px solid #aaaaaa;
}
nav .col-sm-2 a:hover {
color: #ebebeb;
text-decoration: none;
}
.container-fluid .row .col-sm-2 {
margin-top: -30px;
background-color: #455a64;
}
.navbar {
margin-bottom: 0;
border-bottom: 0;
}
.container-fluid .row .col-sm-2 a {
color: #ebebeb;
font-size: 16px;
}
.container-fluid .row .col-sm-2 a:hover {
color: #26c6da;
text-decoration: none;
}
.active {
color: #26c6da!important;
text-decoration: none;
}
.glyphicon {
margin-bottom: 30px;
padding-right: 15px;
}
.glyphicon-menu-right {
float: right;
}
.glyphicon-menu-left {
float: right;
}
#panel {
margin-top: 20px;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creator CRM</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/admin.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top"></nav>
<div class="container-fluid">
<div class="row flex">
<div class="col-sm-2">
<hr>
<a href="../index.html"><span class="glyphicon glyphicon-home"></span> Homepage <span class="glyphicon glyphicon-menu-right"></span></a><br>
<a class="active" href="index.html"><span class="glyphicon glyphicon-lock"></span> Modules <span class="glyphicon glyphicon-menu-left"></span></a><br>
<span class="title">Installed modules<hr></span>
<a href="#"><span class="glyphicon glyphicon-th-list"></span> Users management <span class="glyphicon glyphicon-menu-right"></span></a><br>
</div>
<div class="col-sm-10">
<div id="panel">
<div class="panel panel-default">
<div class="panel-heading">Your current plan: <strong>Free</strong> <button class="btn btn-blue">Upgrade your plan to install more modules!</button></div>
<div class="panel-body">
<div style="height: 200vh"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>关于html - 侧边栏没有网页的完整高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43954912/