Как сделать div с отзывчивой высотой?

Question

В основном:

1. У меня есть обертку DIV, которое ширина и высота 100%.
2. Внутри это еще один div, который абсолютно расположен и должен следовать за высотой окна (с небольшим отрывом внизу).
3. Внутри этого div находится список ul, который будет всегда выше, чем родительский div. Если он станет выше, он станет прокручиваемым.

Это то, что я хотел бы достичь:

.wrapper-location { 
 
    \t position: relative; 
 
    \t height: 100vh; 
 
    \t width: 100%; 
 
    \t background: #CCC; 
 
    \t overflow: auto; 
 
    } 
 
    
 
    .box-locator { 
 
    \t background: #f9f9f9; 
 
    \t position: absolute; 
 
     \t right: 50px; 
 
     top: 50px; 
 
     width: 360px; 
 
     border-radius: 5px; 
 
     overflow: hidden; 
 
    \t padding: 0; 
 
    \t box-shadow: 0 0 5px #888; 
 
    \t z-index: 99999999; 
 
    } 
 
    
 
    .box-locator-listing { 
 
    \t margin-left: 0; 
 
    \t overflow-y: auto; 
 
    \t height: 500px; 
 
    } 
 
    
 
    \t .box-locator-listing-item { 
 
    \t \t border-bottom: 1px solid #ccc; 
 
    \t \t list-style: outside none none; 
 
    \t \t padding: 10px; 
 
    \t \t position: relative; 
 
    \t \t background-size: 50px 50px; 
 
    \t }

<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

Я потянув меня за волосы и, похоже, не может заставить его работать.

Answer 1

Добавить краю дна: 50px т.е., равна верхней: 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 
} 

Answer 2

Это то, что вы ищете. Это можно сделать, добавив высоту 100% в .wrapper-loctaion и высоту 90% в .box locator (добавьте высоту 100% в html, тело тоже). Теперь установите верх и низ до 5% для .box-locator, чтобы центрировать его по вертикали.

 

 
    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>