全局包装器 div min-height 100vh 中断 children 固定在移动设备上

Question

在 html 中，我用 div.wrapper min-height:100vh; 全局包装内容；对于 :target push-left 菜单，在移动设备上它会破坏所有儿童 position:fixed；并将其粘贴到页面顶部而不是可见部分。

如果你有任何想法，我尝试了很多很多解决方案..

您可以在 http://test.lelabdigital.fr 看到这个，其中左上角的 nav-button-open 位置固定，但当您滚动底部时会保持在顶部。

谢谢

Answer 1

在您的 main.css 1422 行添加 position: fixed; .

body:target aside.mobile-nav {
    z-index: 9999;
    overflow-y: hidden;
    position: fixed;
}

在 main.css 行 1409 中尝试删除此 style 它会 wprk

.wrapper {
    transform: translateX(0) translateZ(0);
    transition: transform .2s;
    will-change: transform;
}

您还需要 remove 从您的 main.css

中再 style

body:target .wrapper {
    transform: translateX(50vw);
}

如果你不 romve 这个，那么当你 sroll

时 nav-button-open 将不会 fix

global wrapper div min-height 100vh breaks children fixed on mobile