Question

我有问题，我的侧边栏没有网页的全高。试图解决这个问题几个小时但不能......有人能告诉我如何解决这个问题吗？

＆＃13;

customToJSON

＆＃13;

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;
    }

＆＃13;

上面添加了我的代码。对于更大的屏幕，您可能无法看到该错误。所以我也在这里留下了一张照片：

提前感谢您的帮助！:)

P.S打开整页以更好地查看问题，因为它没有实施到较小的设备。

Answer 1

您可以在父级上使用height，并从侧边栏中删除.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>

{{1}}

补充工具栏没有网页的完整高度

1 个答案: