divを反応的な高さにするにはどうすればいいですか？

Question

基本的には：

1. 私は100％幅と高さのラッパーdivを持っています。
2. 内部には、絶対的に配置され、ウィンドウの高さに沿っている別のdivがあります（下部に余白が少しあります）。
3. このdivの内部には、常に親divよりも高いulリストがあります。それが高くなると、スクロール可能になります。

これは私が達成したいものです。

.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

は、あなたが探しているものを、このです。 .wrapper-loctaionに高さ100％を加え、.boxロケータに高さ90％を追加することで行うことができます（html、bodyにも高さ100％を加えます）。 .box-locatorが上下にセンタリングされるように、上部と下部を5％に設定します。あなたが応答を処理するためにビューポートを使用する理由カント

 

 
    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>