左侧导航栏背景色占满整个页面的高度
<!DOCTYPE html><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>某管理系统</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><!--[if lt IE 9]><script src="js/html5shiv.js"></script><script src="js/respond.min.js"></script><![endif]--><style>body{ margin-top:50px; height:100%;}.sys-menu{ background-color: #DCDCDC; padding:20px 0px 0px 0px;margin-bottom:0px; height:100%;}.web-page{ padding-top:20px;padding-left:5px; height:100%;}.table-detail thead td { padding-top:0px; border-top:0px; border-bottom:2px solid #DCDCDC;}.home-btn-group{ margin:10px 10px 10px 0px;padding-left:0px;}.home-btn-group button{ border:1px solid #DCDCDC;}.progress-item{ padding-bottom:20px;}.progress-item .progress{ height:20px;}.progress-item span{ height:32px;}</style></head><body><div class="container-fluid"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">某管理系统</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">功能</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <h6 class="dropdown-header">信息管理</h6> <a class="dropdown-item" href="#">信息建立</a> <a class="dropdown-item" href="#">信息查询</a> <a class="dropdown-item" href="#">信息管理</a> <div class="dropdown-divider"></div> <h6 class="dropdown-header">系统管理</h6> <a class="dropdown-item" href="#">设置</a> <a class="dropdown-item" href="#">帮助</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">帮助</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="user" placeholder="用户名..." aria-label="user"> <input class="form-control mr-sm-2" type="pass" placeholder="密码..." aria-label="pass"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">登陆</button> </form> </div> </nav> <div class="row"> <div class="col-md-2" style="padding-left:0px;"> <div class="container-fluid sys-menu"> <ul class="nav flex-column nav-pills"> <li class="nav-item"> <a class="flex-sm-fill nav-link active" href="#">首页</a> </li> <div class="dropdown-divider"></div> <li class="nav-item"> <a class="flex-sm-fill nav-link" href="#">信息建立</a> </li> <li class="nav-item"> <a class="flex-sm-fill nav-link" href="#">信息查询</a> </li> <li class="nav-item"> <a class="flex-sm-fill nav-link" href="#">信息管理</a> </li> <div class="dropdown-divider"></div> <li class="nav-item"> <a class="flex-sm-fill nav-link" href="#">设置</a> </li> <li class="nav-item"> <a class="flex-sm-fill nav-link" href="#">帮助</a> </li> </ul> </div> </div> <div class="col-md-10 web-page"> <h2>管理控制台</h2> <hr> <div class="col-md-10 col-sm-10 home-btn-group"> <button class="btn btn-default bg-white active" type="submit">操作1</button> <button class="btn btn-primary" type="submit">操作2</button> <button class="btn btn-success" type="submit">操作3</button> <button class="btn btn-info" type="submit">操作4</button> <button class="btn btn-warning" type="submit">操作5</button> <button class="btn btn-danger" type="submit">操作6</button> </div> <div class="row"> <div class="col-md-6"> <div class="card border-primary mb-3"> <div class="card-header bg-primary text-white">最新提醒</div> <div class="card-body text-primary"> <div class="alert alert-success"><strong>提示</strong> 您的订单（2014001）已经审批通过！</div> <div class="alert alert-danger"><strong>提示</strong> 您的订单（2014002）被打回！</div> <div class="alert alert-warning"><strong>提示</strong> 您的订单（2013001）客户付款延迟！</div> </div> </div> </div> <div class="col-md-6"> <div class="card border-primary mb-3"> <div class="card-header bg-primary text-white">我的任务</div> <div class="card-body text-primary"> <div class="alert alert-info">订单批审<span class="badge badge-pill badge-secondary float-right">42</span></div> <div class="alert alert-info">收款确认<span class="badge badge-pill badge-secondary float-right">20</span></div> <div class="alert alert-info">付款确认<span class="badge badge-pill badge-secondary float-right">10</span></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="card border-primary mb-3"> <div class="card-header bg-primary text-white">最新订单</div> <div class="card-body table-responsive"> <table class="table table-striped table-detail"> <thead> <tr> <td>#</td> <td>产品</td> <td>数量</td> <td>总金额</td> <td>业务员</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Apple Macbook air</td> <td>10</td> <td>80000</td> <td>王小贱</td> </tr> <tr> <td>2</td> <td>Apple iPad air</td> <td>20</td> <td>65000</td> <td>尹开花</td> </tr> <tr> <td>3</td> <td>Apple Macbook pro</td> <td>5</td> <td>50000</td> <td>刘老根</td> </tr> </tbody> </table> <button class="btn btn-primary">查看详情 >></button> </div> </div> </div> <div class="col-md-6"> <div class="card border-primary mb-3"> <div class="card-header bg-primary text-white">工程进度</div> <div class="card-body"> <div class="progress-item"> <h4><span class="badge badge-primary align-middle">水井挖掘工程</span></h4> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="progress-item"> <h4><span class="badge badge-danger align-middle">基建工程</span></h4> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </div> </div> </div> </div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script></body></html>研究了半天，没能把左侧导航栏背景填充整个页面高度，只能整到跟右侧内容持平，不知如何解决。。。
