css - 如何使 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)来完成。现在将 .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>