How to make a div have a responsive height? - css

Question

Basically:
I have a wrapper div that is 100% width and height.
Inside it is another div that is absolutely positioned and must follow the window height (with a little bit of margin at the bottom).
Inside this div is a ul list that will be always as high as the parent div. If it gets higher, it will become scrollable.
This is what I'd like to achieve:
.wrapper-location {
position: relative;
height: 100vh;
width: 100%;
background: #CCC;
overflow: auto;
}
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 50px;
width: 360px;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
}
.box-locator-listing {
margin-left: 0;
overflow-y: auto;
height: 500px;
}
.box-locator-listing-item {
border-bottom: 1px solid #ccc;
list-style: outside none none;
padding: 10px;
position: relative;
background-size: 50px 50px;
}
<div class="wrapper-location">
<div class="box-locator">
<ul class="box-locator-listing">
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
</ul>
</div>
</div>
http://codepen.io/aguerrero/pen/ygrwPr
I've been pulling my hair and can't seem to make it work.

Answer 1

Is this what you are looking for. It can be done by adding height 100% to .wrapper-loctaion and height 90% to .box locator (add height 100% to html,body too). Now set top and bottom to 5% for .box-locator to center it vertically.
html,
body {
height: 100%;
}
.wrapper-location {
position: relative;
height: 100%;
width: 100%;
background: #CCC;
overflow: auto;
}
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 5%;
bottom: 5%;
width: 360px;
height: 90%;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
}
.box-locator-listing {
margin-left: 0;
overflow-y: auto;
height: 500px;
}
.box-locator-listing-item {
border-bottom: 1px solid #ccc;
list-style: outside none none;
padding: 10px;
position: relative;
background-size: 50px 50px;
}
<div class="wrapper-location">
<div class="box-locator">
<ul class="box-locator-listing">
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
</ul>
</div>
</div>

Answer 2

Add margin-bottom:50px i.e, equal to top:50px
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 50px;
width: 360px;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
margin-bottom: 50px; //new property
}