0
我有我的侧边栏不具有网页的完整高度问题的全部高度。试图解决这个问题了几个小时,但不能...有人能告诉我如何解决这个问题?侧边栏没有网页
body, html {
height: 100%;
}
.navbar-inverse {
\t background-color: #455a64;
\t color: #f7f6f6;
\t vertical-align: middle;
\t height: 50px;
\t line-height: 50px;
\t font-size: 16px;
}
nav .col-sm-2 a {
\t color: #f7f6f6;
\t margin-left: 40%;
}
hr {
\t border-top: 1px solid #aaaaaa;
}
nav .col-sm-2 a:hover {
\t color: #ebebeb;
\t text-decoration: none;
}
.container-fluid .row .col-sm-2 {
\t margin-top: -30px;
\t background-color: #455a64;
\t height: 100%;
}
.navbar {
\t margin-bottom: 0;
\t border-bottom: 0;
}
.container-fluid .row .col-sm-2 a {
\t color: #ebebeb;
\t font-size: 16px;
}
.container-fluid .row .col-sm-2 a:hover {
\t color: #26c6da;
\t text-decoration: none;
}
.active {
\t color: #26c6da!important;
\t text-decoration: none;
}
.glyphicon {
\t margin-bottom: 30px;
\t padding-right: 15px;
}
.glyphicon-menu-right {
\t float: right;
}
.glyphicon-menu-left {
\t float: right;
}
#panel {
\t 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开启全页面,以便更好地看问题,因为它没有实施,以更小的设备!
啊......我没看到,如果在面板太少内容,然后边栏背景没有网页的全高..:/(尝试将面板主体高度改为20vh) – Sprunkas