如何使 div 具有响应高度？

Question

基本上：

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

这是我想要实现的目标：

  .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

我一直在拉头发，但似乎无法让它发挥作用。

Answer 1

这就是你要找的。可以通过将高度 100% 添加到 .wrapper-loctaion 并将高度 90% 到 .box 定位器（也将高度 100% 添加到 html、body ）来完成。现在将 top 和 bottom 设置为 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>

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
}