边栏全高度为背景颜色

Question

到目前为止，我有一个响应性的侧栏和顶栏。

我的问题是我想让我的侧杆100％高度但仍然响应。我希望它是100％的原因所以背景颜色在屏幕上运行。这就是它目前的样子http://prntscr.com/gtyxt0

这是缩短浏览器宽度时的样子：http://prntscr.com/gtyxxp单击图标时，侧边栏会展开，这正是我想要的。

当我将侧栏的位置设置为固定时，我可以将高度设置为100％，但我失去了所有的响应能力。

最好的方法是什么？

这是我的HTML / CSS

HTML

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand title" href="#">DSUM</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{username}} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Sign Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
</div>
<!-- /.navbar -->

<div class="container-fluid page-header">
    <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="sidebar-nav">
                <ul class="nav">
                    <li class="sidebar-item-group">Menu</li>
                    <li><a routerLink="/dashboard"><i class="fa fa-home" aria-hidden="true"></i> Dashboard</a></li>
                    <li class="nav-divider"></li>
                    <li class="sidebar-item-group">Quick Links</li>
                    <li><a routerLink="/usersearch"><i class="fa fa-search" aria-hidden="true"></i> User Search</a></li>
                    <li><a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i> Create Disc Account</a></li>
                    <li><a href="#"><i class="fa fa-address-card-o" aria-hidden="true"></i> Create Disc Role</a></li>

                </ul>
            </div>
            <!--/.well -->
        </div>
        <!--/span-->

        <div class="col-xs-12 col-sm-9">
            <br>
            <div class="jumbotron">
                <a class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
                <h1>Hello, world!</h1>
                <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
            </div>
            <div class="row">

            </div>
            <!--/row-->
        </div>
        <!--/span-->


    </div>
    <!--/row-->

</div>
<!--/.container-->

CSS

body {
    padding-top: 50px;
}

footer {
    padding-left: 15px;
    padding-right: 15px;
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        background: #ecf0f1;
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -40%;
    }

    .row-offcanvas-left.active {
        left: 40%;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 40%;
        margin-left: 12px;
    }
}

#sidebar {
    padding: 15px;
    margin-top: 10px;
    background-color: #2F363E;
}

.title {
    background-color: #1F70A8;
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #e1ffff;
    width: 185px;
}

.sidebar-item-group {
    color: #637083;
    font-family: 'Lato', sans-serif;
    font-weight: bold
}