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オープンし、それはより小さなデバイスに実装されていないので!。
ああ...私は、パネル内の少なすぎるコンテンツがあるならば、サイドバーの背景には、Webページの完全な高さを持っていないことを見ませんでした..:/(しようパネルボディdivの高さを20vhに変更) – Sprunkas