如何使div具有响应高度？

Question

基本上：

1. 我有一个100％宽度和高度的包装div。
2. 在里面是另一个绝对定位的div，必须遵循窗口高度（底部有一点边距）。
3. 在这个div里面是一个ul列表，它总是和父div一样高。如果它变得更高，它将变得可滚动。

这就是我想要实现的目标：



＆＃13;
＆＃13;
  .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;
    	}
＆＃13;
    <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>
＆＃13;
＆＃13;
＆＃13;

http://codepen.io/aguerrero/pen/ygrwPr

我一直在拉我的头发似乎无法发挥作用。

Answer 1

这就是你要找的东西。可以通过向.box定位器添加100％高度到.wrapper-loctaion和高度90％来完成（将高度100％添加到html，身体也是如此）。现在将.box-locator的顶部和底部设置为5％，使其垂直居中。

＆＃13;

＆＃13;

  

    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;
}

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加margin-bottom：50px，即等于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
}