Question

我试过这个html，看到codepen http://codepen.io/shmdhussain/pen/QywWXb，我试图将内容框放在绝对位置div中，最后一个框内容部分隐藏，有人能解释我为什么会这样吗？在此先感谢您的任何帮助

＆＃13;

<!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>

＆＃13;

Answer 1

问题是从顶部开始的绝对定位元素50px。现在你通过100vh将高度添加到该元素，这样它就会100 view Height + 50px，甚至还有更多的像素来自某个我想要去调试的地方...无论如何你可以{ {1}}你的身高如下：

calc()

http://jsfiddle.net/1m82L973/

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

1 个答案: