左侧导航栏背景色占满整个页面的高度
来源：4-1 编程挑战
Kevin_0012
2018-10-07 16:10
<!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>研究了半天，没能把左侧导航栏背景填充整个页面高度，只能整到跟右侧内容持平，不知如何解决。。。
写回答
关注
2回答
-
- 7君
- 2018-10-15 22:14:34
好象是样式设置的问题，设置：html,body{height:100%} 第一个container-fluid 加上行内样式height:100%,第一个row 加上行内样式，height:100%即可，记得是加行内样式，或者你自己起个类名，后缀上。height:100%就是让自己的高度等于父元素的高度，是父元素，不是祖先元素
-
- Kevin_0012
- 2018-10-26 14:17:05
<!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, shrink-to-fit=no"><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{ height:100%;font-size: .875rem;}.feather { width: 16px; height: 16px; vertical-align: text-bottom;}.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; /* Behind the navbar */ padding: 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);}.sidebar-sticky { position: -webkit-sticky; position: sticky; top: 48px; /* Height of navbar */ height: calc(100vh - 48px); padding-top: .5rem; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */}.sidebar-sticky .nav-pills .nav-link{ color:blue;}.sidebar-sticky .nav-pills .nav-link .active{ color:white;}.sidebar .nav-link { font-weight: 500; color: #333;}.sidebar .nav-link .feather { margin-right: 4px; color: #999;}.sidebar .nav-link.active { color: #007bff;}.sidebar .nav-link:hover .feather,.sidebar .nav-link.active .feather { color: inherit;}.sidebar-heading { font-size: .75rem; text-transform: uppercase;}.navbar-brand { padding-top: .5rem; padding-bottom: .5rem; font-size: 1rem; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);}.navbar .form-control { padding: .5rem .78rem; border-width: 0;}.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:1.0rem;//18px;}.progress-item .progress{ height:0.875rem;//18px;}.progress-item span{ font-size: 1.0rem;}</style></head><body><nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark flex-md-nowrap p-0"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" 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 px-3 mr-auto"> <li class="nav-item text-nowrap active"> <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a> </li> <li class="nav-item text-nowrap 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 text-nowrap"> <a class="nav-link" href="#">帮助</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control form-control-dark mr-sm-2" type="text" placeholder="用户名..." aria-label="user"> <input class="form-control form-control-dark mr-sm-2" type="password" placeholder="密码..." aria-label="pass"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">登陆</button> </form> </div></nav><div class="container-fluid"> <div class="row"> <nav class="col-md-2 d-none d-md-block bg-light sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column nav-pills"> <li class="nav-item text-nowrap"> <a class="nav-link flex-sm-fill active" href="#"><span data-feather="home"></span>首页<span class="sr-only">(current)</span></a> </li> <div class="dropdown-divider"></div> <li class="nav-item text-nowrap"> <a class="nav-link flex-sm-fill" href="#"><span data-feather="info-create"></span>信息建立</a> </li> <li class="nav-item text-nowrap"> <a class="nav-link flex-sm-fill" href="#"><span data-feather="info-query"></span>信息查询</a> </li> <li class="nav-item text-nowrap"> <a class="nav-link flex-sm-fill" href="#"><span data-feather="info-manager"></span>信息管理</a> </li> <div class="dropdown-divider"></div> <li class="nav-item text-nowrap"> <a class="nav-link flex-sm-fill" href="#"><span data-feather="setting"></span>设置</a> </li> <li class="nav-item text-nowrap"> <a class="nav-link flex-sm-fill" href="#"><span data-feather="help"></span>帮助</a> </li> </ul> </div> </nav> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom"> <h1 class="h2">管理控制台</h1> </div> <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-sm 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> </main> </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>以上是参考官网的Demo弄的，基本一致了。
基于bootstrap的网页开发
Bootstrap框架的基础教程，学会用Bootstrap前端框架搭建网页
187668 学习 · 734 问题
相似问题