Garuuk Garuuk - 7 months ago 12
HTML Question

Better way to achieve 100% div height

Is there a better way to achieve 100% height with auto scroll as shown in the plnkr below without having to have all those fill classes added? I feel like there must be a more elegant way.

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>


and my css

/* Styles go here */

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

You can use viewport height: 100vh.