设置了iframe的高度，覆盖了底下的iframe，如何在菜单收起的时候改变iframe的高度，或者其他能让底下的iframe浮上来，也或者是如何调用子页面的元素

这是父页面index页

<script>                
document.onclick=function() {                        
        if(document.getElementById('navmenu').contentWindow.document.getElementsByClassName('nav-items')[0],null)['opacity']==0){    
          //这段写错了的，这里我想调用子页面的元素class，就是下面那段css，判断opacity=0时，改变高度，主要是我不会写这里的代码   
                document.getElementsById("navmenu").style.height="45px";                                
        }                                
}                        
</script>                
                                                                                                                                        
        </head>
        <body>
        <iframe src="/title.html" id="title" name="title" width="100%" height="80px" frameborder="no" scrolling="no" marginwidth="0" mar
        <div></div>
        <div style='position:absolute;width:95%;'>            
                <iframe src="" id="navmenu" name="navmenu" width="100%" height="450px" marginwidth="0" marginheight="0" scrolling="no" f
        //这里的iframe设置高为450，因为这个是菜单的页面，但是收回去之后还是占了450，导致点击下面的iframe时点击不了，在450以下的可以正常点击，所以想能不能当子页面的opacity=0时，就是菜单收回之后，把高度改成45呢
        </div>
        <div style="margin-top:45px;">                   
                <iframe src="" id="content" height="1500px" name="content" scrolling="auto" marginwidth="0" topmargin="0" marginheight="
        </div>
</body>

这是子页面菜单的css,试过把opacity换成display没用

 .nav-items{             
                        background-color: rgba(0,0,0,.82);
                        height: 100vh;                                                         
                        position: absolute;     
                        top: 44px;
                        left: 0;
                        transform: scaleY(0);                                    
                        transition: transform .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
                        transform-origin: 50% 0;                                                        
                        opacity:0;                                                                      
                }                                                                                                                       
                #toggler:checked ~ .nav-items{                                                                                          
                        transform: scaleY(1);                                                                                           
                        opacity:1;                                                                                                      
                }

所以最主要的是我想调用子页面的元素class，或者有其他更好的办法，请各位指导

最后在子页面添加调用父页面的元素

<script>
document.onclick=function() {
    if(getComputedStyle(document.getElementsByClassName('nav-items')[0],null)['opacity']==1){
        document.getElementsByTagName("input")[0].checked = 0;
        window.parent.document.getElementById('navmenu（父页面的元素id）').style.height='45px';
    }
        else{window.parent.document.getElementById('navmenu（父页面的元素id）').style.height='600px';
}
</script>

//点击页面任意位置，取消input选中，并且改变父页面的元素样式