我尝试了这个html，请参见codepen http://codepen.io/shmdhussain/pen/QywWXb，在这里我尝试将内容框放置在绝对位置div内，最后一个框的内容被部分隐藏了，谁能解释我为什么会这样？预先感谢您的任何帮助
<!DOCTYPE html>
<html dir="rtl">
<head>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
transform: translateZ(0px);
background-color: rgb(229, 227, 223);
}
.mapAndContentContainer{
position: relative;
height: 100%;
overflow: hidden;
}
.header{
position: fixed;
height:50px;
width:100%;
left:0;
right:0;
text-align: center;
background-color: black;
color:white;
z-index: 1;
}
#content{
position: absolute;
top: 50px;
overflow-x: hidden;
overflow-y: hidden;
}
.content-child1{
padding:50px 20px;
width:22.75rem;
height:100vh;
background-color: white;
float:right;
overflow:scroll;
-webkit-overflow-scrolling: touch;
}
.content-child2{
width:40px;
height:100vh;
background-color: green;
float:right;
}
.box{
background-color: black;
color:white;
padding:30px;
height:300px;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="header">
My Header
</div>
<div class="mapAndContentContainer">
<div id="map">
</div>
<div id="content">
<div class="cc content-child1">
<div class="box"> Hello I am Box0</div>
<div class="box"> Hello I am Box1</div>
<div class="box"> Hello I am Box2</div>
<div class="box"> Hello I am Box3</div>
<div class="box"> Hello I am Box4</div>
<div class="box"> Hello I am Box5</div>
<div class="box"> Hello I am Box6</div>
<div class="box"> Hello I am Box7</div>
</div>
<div class="content-child2"></div>
</div>
</div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtCtpRwgpPTG-R71dy-pBlWBhqqovyClA&callback=initMap">
</script>
</body>
</html>最佳答案
问题是绝对定位元素50px从顶部开始。现在，您通过100vh将高度添加到该元素，因此它将是100 view Height + 50px甚至是我不想去调试的某个地方的填充像素甚至更多的像素……无论如何，您都可以像这样calc()您的高度：
.content-child1 {
padding: 50px 20px;
width: 22.75rem;
height: calc(100vh - 130px); /* check this line changed */
background-color: white;
float: right;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
http://jsfiddle.net/1m82L973/
关于html - 内容隐藏在绝对位置元素中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34127913/