内容隐藏在绝对位置元素中
[英]Content is hidden in Absolute position element
问题描述
I tried this html, see the codepen http://codepen.io/shmdhussain/pen/QywWXb , where i tried to place the content boxes inside absolute position div, the last box content is partially hidden , Could anyone explain me why this happens?. 
我尝试了此html，请参见codepen http://codepen.io/shmdhussain/pen/QywWXb ，在这里我尝试将内容框放置在绝对位置div内，最后一个框的内容被部分隐藏了，谁能解释我为什么会这样？ Thanks in advance for any help 预先感谢您的任何帮助
<!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>
1 个解决方案
解决方案1
2 2015-12-07 07:07:31
The problem is the absolute positioned element 50px from top. 问题是绝对定位元素距顶部50px 。 Now you add the height to that element by 100vh so it will be 100 view Height + 50px and even some more pixels from padding somewhere which I didn't want to go and debug... anyway you can calc() your height like this: 现在，您以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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.