内容隐藏在绝对位置元素中答案

【问题标题】：Content is hidden in Absolute position element内容隐藏在绝对位置元素中
【发布时间】：2015-12-07 15:13:07
【问题描述】：

我试过这个 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>

【问题讨论】：

@Leothelion 。是的狮子座

标签： html css

【解决方案1】：

问题是从顶部开始的绝对定位元素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/

【讨论】：

谢谢你的帮助，这个130px是怎么来的，你知道吗？因为我从顶部只使用了 50px。
@MohamedHussain 可能来自 #content 的 50 个，另外 50 个来自 padding top/bottom .content-child1，以及 30 个来自 .box jsfiddle.net/1m82L973/1