Açılan menü divumun arkasındaki bir div, kalması gerektiğinde kayar

Question

Bir iPhone'da Safari'de bir navigasyon menüsünün arkasındaki bir .container div. Menüde üst üste yerleştirilmiş olsa bile menüde gezinirken kaydırma yapar. içerik div

Bu sadece bir iPhone üzerinde olur ve overcroll denilen bir şeyle ilgili olup olmadığından emin değilim?

HTML Nav

<button class="c-hamburger c-hamburger--htx"> 
    <span>toggle menu</span> 
</button> 
<nav id="sidebar" class="nav-container"> 
<!--Menu icon--> 

<!--Widget area--> 
<?php if (is_active_sidebar('home_left_1')) : ?> 
    <div id="primary-sidebar" class="nav-container primary-sidebar widget-area" role="complementary"> 

     <?php dynamic_sidebar('home_left_1'); ?> 
    </div><!-- #primary-sidebar --> 
<?php endif; ?> 

<!--Menu js--> 
<script> 
    (function() { 

    "use strict"; 

    var toggles = document.querySelectorAll(".c-hamburger"); 

    for (var i = toggles.length - 1; i >= 0; i--) { 
     var toggle = toggles[i]; 
     toggleHandler(toggle); 
    }; 

    function toggleHandler(toggle) { 
     toggle.addEventListener("click", function(e) { 
     e.preventDefault(); 
     (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active"); 
     }); 
    } 

    })(); 

    $('.c-hamburger').click(function() { 
    $("#sidebar").toggleClass("show"); 
    }); 


</script> 

</nav> 

HTML Ana Endeksi

<?php get_header(); ?> 

<?php get_sidebar(); ?> 

<div id="main" class="content"> 
    <div id="content" class="content-container"> 
     <section> 
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <p><?php the_content(__('(more...)')); ?></p> 
      <?php endwhile; else: ?> 
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> 
     </section> 
    </div> 
</div> 

<div id="delimiter"></div> 

<?php get_footer(); ?> 

CSS İşte

nav div üzerinde açıldığında bile kayar içerik div olduğunu onu bir İşte

n iPhone

/* Content area 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
.content {padding-left: 20rem;} 

.content-container { 
    display: block; 
    margin: 0px auto; 
    max-width: 78rem; 
    text-align: left; 
    padding: 0 4rem 0 4rem; 
} 

.content-container section {padding: 1.25rem;} 

nav div benim CSS, ama aklımda bir sorun

yaşıyorum ben de boyutunda bu CSS bazı üzerine dahil Medya sorgusunun tutmak

/*xx small*/ 
@media (min-width: 0px) and (max-width: 600px) { 
    html {font-size: 10.5px;} 

    .content {padding-left: 0;} 
    .content-container {padding: 0 1.5rem 0 1.5rem;} 

    .c-hamburger {display: block;} 

    nav {height: 100%; pointer-events: none; opacity: 0; width: 100%;} 
    nav .nav-container {float: left; padding: 9rem 0 0 6rem;} 
    nav a {font-size: 1.83rem;} 
    nav #logo {height: 4rem; width: 4rem; margin-bottom: 4rem;} 

    p {font-size: 1.83rem; font-weight: 300; line-height: 2.7rem;} 
    p, h2 {width: 100%;} 
    h1 {padding-top: 8rem;} 
    /*give h2 intro some space*/ 
    h2 + h3 {padding-top: 5rem;} 

    h2 + h4 {padding-top: 5rem;} 

    h2 + p {padding-top: 5rem;} 
} 

: Burada

/* Nav –––––––––––––––––––––––––––––––––––––––––––––––––– */ nav { position: fixed; width: 20rem; text-align: center; left: 0; top: 0; bottom: 0; background-color: white; opacity: 1; overflow-y:auto; padding-bottom: 4rem; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -webkit-transition: opacity .3s ease-in-out; z-index: 8; } /*hides sidebar for mobile breakpoints*/ nav.show {opacity: 1; pointer-events: all;} nav .nav-container { display: inline-block; padding-top: 5rem; width: 50%; text-align: left; } 

tam ekran menüye sahip olduğu boyut için medya sorgu 210

Yardımlarınız için teşekkür ederiz!

Answer 1

Sadece bu div için sabit pozisyon koymak zorunda veya

.content-container { 
    display: block; 
    margin: 0px auto; 
    max-width: 78rem; 
    text-align: left; 
    position:fixed;//absolute for floating 
    padding: 0 4rem 0 4rem; 
}