为多个网页大小保持侧导航栏的高度

Question

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

我已将导航栏的 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 类的 min-height 值的百分比，但有没有更有效的方法来实现我的目标？

（编辑）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>

Answer 1

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

CSS：

.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;
}

HTML：

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

Answer 2

你可以为侧边导航栏添加这个 CSS

CSS：

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