html - global wrapper div min-height 100vh 打破固定在移动设备上的 child

Question

在 html 中，我使用 div.wrapper min-height:100vh; 全局包装内容；对于 :target 向左推菜单，在移动设备上它会破坏所有子位置:固定；并将其粘贴到页面顶部，而不是可见部分。

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

您可以在以下网址查看: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;
}

您还需要从 main.css 中删除一个样式

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

如果你不 romve this ，那么 nav-button-open 在你 sroll

时将不会 fix