Html 对于多个网页大小，保留侧导航栏的高度

我一直在开发一个网站，我正在测试响应能力。一切似乎都很好，但我一直无法克服的一个障碍是侧导航栏的高度并不总是网站的大小。我的应用程序根据用户选择显示其他组件，因此网站的高度可以不同

我已经将导航栏的css设置为100%的高度，这对于我用来开发网站的屏幕来说是很好的，但是每当我改变我的响应，说1080p x 720p时，我的侧栏就不会一直保持在屏幕的高度，我就留下了空白（请看下面的照片）

我的侧面导航css如下所示：

.side-nav {
  min-height: 100% !important;
  width: 240px;
  position: absolute;
  z-index: 999;
  left: 0;
  background-color: #00a56b;
  padding-top: 20px; 
}

我曾考虑使用媒体查询根据屏幕高度更改.side nav类的最小高度值的百分比，但是否有更有效的方法来实现我的目标

（编辑）html div结构：

<!--The main container for the web application-->
<div id="container">
    <!--The header band that will be used throughout the site-->
    <header id="header" class="bottom-border">
        <div id="brand-logo">
            <img id="logo" src="/img/LOGO - SMALL.png" />
            <h1 id="page-header-title"></h1>
        </div>
    </header>
    <!--Left navigation bar that will be available on all pages-->
    <nav class="side-nav">
        <div id="nav-container">
            <p>Navigation</p>
            <a href="#!incident/new" title="New Incident">
                <i class="glyphicon glyphicon-plus"></i> New Incident
            </a>
            <a href="#!incident/search" title="Search Incident">
                <i class="glyphicon glyphicon-search"></i> Search Incident
            </a>
            <a href="#!reports" title="Reports">
                <i class="glyphicon glyphicon-file"></i> Reports
            </a>
            <a href="#!manager" title="Manger Setup">
                <i class="glyphicon glyphicon-cog"></i> Manager Setup
            </a>
        </div>
    </nav>

    <!--Use the angular ng-view attribute, each page will be loaded into this section-->
    <section class="main-content-wrapper">
        <section id="main-content" class="slide-animation" ng-view></section>
    </section>
</div>

航行

您可以为侧导航栏添加此css

CSS:

---

使用显示表进行此类设计的其他方式

CSS:

HTML:

不幸的是，这并没有解决我的问题，我仍然看到我旁边的空白处。请发送html div结构。我已经编辑了我的帖子，现在你可以看到我的div结构了。分区分区与没有坚持的高度有什么关系吗？对不起，我不能投票给你的答案，但基本上这解决了我的问题。我认为我以前的解决方案（现在已删除）就是解决方案。谢谢你的帮助：）

.side-nav{
    width: 240px;
    position: absolute;
    z-index: 999;
    left: 0;
    background-color: #00a56b;
    padding-top: 20px;
    top: 0;
    bottom: 0;
    height: 100vh;
}

.parent-div{
    display: table;
    width: 100%;
}
.side-nav,
.main-content{
    display: table-cell;
    vertical-align: top;
}
.side-nav{
    width: 240px;
    height: 100vh;
    background-color: #00a56b;
}
.main-content{
    width: calc(100% - 260px);
    padding-left: 20px;
}

<div class="parent-div">
  <div class="side-nav"></div>
  <div class="main-content"></div>
</div>