[英]global wrapper div min-height 100vh breaks children fixed on mobile
In html i'm globally wrapping content with a div.wrapper min-height:100vh; 在html中,我使用div.wrapper min-height:100vh全局包装内容; for :target push-left menu, on mobile it breaks all childrens position:fixed;
对于:target左菜单,在移动设备上它将打破所有孩子的位置:固定; and stick it to the top of page and not to the visible part.
并将其粘贴到页面顶部而不是可见部分。
If you have any idea i tried many many solutions.. 如果您有任何想法,我尝试了许多解决方案。
You can see this at : http://test.lelabdigital.fr where nav-button-open on the top left corner is position fixed but stick to the top when you scroll bottom. 您可以在以下位置看到此内容: http : //test.lelabdigital.fr ,其中左上角的nav-button-open位置固定,但在滚动底部时会固定在顶部。
Thanks 谢谢
In your main.css
1422 line add position: fixed;
在您的
main.css
1422行中添加position: fixed;
. 。
body:target aside.mobile-nav {
z-index: 9999;
overflow-y: hidden;
position: fixed;
}
In main.css
line 1409 try to remove this style
it will wprk 在
main.css
第1409行中,尝试删除此style
,它将wprk
.wrapper {
transform: translateX(0) translateZ(0);
transition: transform .2s;
will-change: transform;
}
You also need to remove
one more style
from your main.css
您还需要从
main.css
remove
另一种style
body:target .wrapper {
transform: translateX(50vw);
}
If you not romve this , then nav-button-open
will not fix
when you sroll
如果你不romve这一点,那么
nav-button-open
不fix
,当你sroll
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.