实现100%div高度的更好方法

Question

有没有更好的方法可以在不添加所有填充类的情况下，通过下面的plnkr中所示的自动滚动实现100%的高度？我觉得一定有更优雅的方式。

http://plnkr.co/edit/dh63n6j9R6t9LiBKhHQA?p=preview

<section class="content fill">
    <div class="container-fluid fill">
        <div class="row fill">
            <div class="col-sm-12 fill">
                <div class="row fill">
                    <div class="col-xs-8 fill">
                        <div class="main-container-wrapper">
                            <h1>Main</h1>
                            <div class="inner">Overflow</div>
                            <div class="inner">Overflow</div>
                            <div class="inner">Overflow</div>
                            <div class="inner">Overflow</div>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="right-container-wrapper">
                            <h1>Right</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

和我的css

/*此处显示样式*/

body, html{
  min-height: 100%;
  height: 100%;
}
.main-container-wrapper{
  background: red;
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
}
.right-container-wrapper{
  background: orange;
  min-height: 100%;
  height: 100%;
}

.fill{
  min-height: 100%;
  height: 100%;
}
.inner{
  padding: 50px 0px;
}

Answer 1

您可以使用视口高度：100vh。

Answer 2

视口高度及其对应的视口宽度将根据浏览器窗口调整容器的大小。你可以这样写代码：

div {
  height: 100vh;
}

100是窗口高度（或宽度）的100%。