为了账号安全,请及时绑定邮箱和手机立即绑定

左侧导航栏背景色占满整个页面的高度

<!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 回答

好象是样式设置的问题,设置:html,body{height:100%}  第一个container-fluid 加上行内样式height:100%,第一个row 加上行内样式,height:100%即可,记得是加行内样式,或者你自己起个类名,后缀上。height:100%就是让自己的高度等于父元素的高度,是父元素,不是祖先元素

0 回复 有任何疑惑可以回复我~
#1

Kevin_0012 提问者

前段时间参考官网的Demo弄好了,谢谢
2018-10-26 回复 有任何疑惑可以回复我~
<!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弄的,基本一致了。


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

左侧导航栏背景色占满整个页面的高度

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信