Css

Question

打开 Projects page, it "moves" and does not take up the whole screen unlike this same menu-wrapper in my Index page

的菜单包装器时出现问题

索引页的菜单包装

项目页面的菜单包装器

HTML:

<!doctype html>
    <body>
    <!--contient toutes les div-->
        <div id="all">
        <!--suiveur de curseur-->
            <div class="cursor"></div>
        <!--loader-->
        <!--    <div id="loader">
                <img src="src/img/logo.png"> 
            </div>  -->
        <!--chargement-->
            <div id="breaker"> </div>
            <div id="breaker-two"> </div>
        <!--Navigation- ouverture-->
            <div id="navigation-content">
                <div class="logo">
                    <h1>
                        <a id="name">lookitsgraphic</a>
                    </h1>
                </div>
                <div class="navigation-close">
                    <span class="close-first"></span>
                    <span class="close-second"></span> 
                </div>
                <div class="navigation-links">
                    <a href="#"  data-text="HOME" id="home-link" >HOME</a>
                    <a href="javascript:setTimeout(()=>{window.location = 'aboutMe.html' },800);"  data-text="ABOUT" id="about-link" >ABOUT</a>
                    <a href="javascript:setTimeout(()=>{window.location = 'projects.html' },800);" data-text="PROJECTS" id="projects-link" >PROJECTS</a>
                    <a href="javascript:setTimeout(()=>{window.location = 'portfolio.html' },800);" data-text="PORTFOLIO" id="portfolio-link" >PORTFOLIO</a>
                    <a href="javascript:setTimeout(()=>{window.location = 'contact.html' },800);" data-text="CONTACT" id="contact-link" >CONTACT</a>
                </div>
            </div>
        <!--Home Page-->
        <!--Header-->
         <header class="header_down"> 
        <!--div-->
                <h1><a class="logoInit" alt="logo">lookitsgraphic</a>
                </h1>
                                <div class="social-media-links">
                    <a href="https://www.instagram.com/lookitsgraphic/" target="_blank">
                        <img src="src/picto/Instagram.png" class="social-media" alt="instagram-logo">
                    </a>
            <!--Your instagram homepage link inser in place of "#"-->
                    <a href="Tel:06014522**">
                        <img src="src/picto/Phone.png" class="social-media" alt="phone-logo">
                    </a>
                    <a href="mailto: graphisme.bonnet@gmail.com" target="_top">
                        <img src="src/picto/Mail.png" class="social-media" alt="mail-logo">
                    </a>
                    <a href="https://www.lookitsgraphic.com/">
                        <img src="src/picto/Eye.png" class="social-media" alt="eye-logo">
                    </a>
                </div>
                <div class="menubar">
                    <span class="first-span"></span>
                    <span class="second-span"></span>
                    <span class="third-span"></span>
                </div>
        <!--Header-->
 
    <!--Header Fin-->
          </header>
          
         <!--GRILLE-->
         <div class="grille">
            <div class="colonne1">

              <a class="playgif" href="test.html">  
                <div class="vignette_verticale">
                  <div class="hover_vignettes_vertical hover_color">
                    <div class="texte_vignette_verticale">
                      <div class="titre_vignette">TEST</div>
                      <div class="informations_vignette"> 
                          lorem ipsum</br>
                         
                      </div>
                    </div> 
                  </div>
                <img data-swap="src/img/portfolio/vertical_vignette.gif" src="src/img/portfolio/vertical_vignette.png">
                </div>
              </a> 


            </div> 

            <div class="colonne2"> 

            <a  class="playgif" href="test.html">
                <div  class="vignette_horizontale">
                  <div  id="anim1" class="hover_vignettes hover_color">
                    <div id="anim1" class="texte_vignette">
                      <div id="anim1" class="titre_vignette">TEST</div>
                      <div  id="anim1" class="informations_vignette">
                          lorem ipsum</br>
                      </div>
                    </div>      
                  </div>
                  <img data-swap="src/img/portfolio/vignette.gif" src="src/img/portfolio/vignette.png">
                  
                </div>
              </a> 

            <a class="playgif" href="test.html">
                <div class="vignette_horizontale">
                  <div class="hover_vignettes hover_color">
                    <div class="texte_vignette">
                      <div class="titre_vignette">TEST</div>
                      <div class="informations_vignette">
                          lorem ipsum</br>
                      </div>
                    </div>      
                  </div>
                <img data-swap="src/img/portfolio/vignette.gif" src="src/img/portfolio/vignette.png">
                </div>
              </a> 
 
 


              
            </div>
            
            <div class="colonne3"> 

               <a class="playgif" href="test.html">
                <div class="vignette_horizontale">
                  <div class="hover_vignettes hover_color">
                    <div class="texte_vignette">
                      <div class="titre_vignette">TEST</div>
                      <div class="informations_vignette">
                          lorem ipsum</br>
                      </div>
                    </div>
                  </div>
                <img data-swap="src/img/portfolio/vignette.gif" src="src/img/portfolio/vignette.png">
                </div>
              </a>  

            <a class="playgif" href="test.html">
                <div class="vignette_horizontale">
                  <div class="hover_vignettes hover_color">
                    <div class="texte_vignette">
                      <div class="titre_vignette">TEST</div>
                      <div class="informations_vignette">
                          lorem ipsum </br>
                      </div>
                    </div>      
                  </div>
                <img data-swap="src/img/portfolio/vignette.gif" src="src/img/portfolio/vignette.png">
                </div>
              </a> 

              
              
            </div>
           </div> 
    <!--ALL Fin-->
            </div>

    <!--Scripts-->
        </div>
        <script src="fab/js/all/projects.js"></script>
    </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Monoton&amp;display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:500&amp;display=swap');
*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
::-webkit-scrollbar{
width: 4px;
color:#0E3775;
transition: all .4s ease;
}
::-webkit-scrollbar-thumb {
background: #0E3775; 
border-radius: 4px;
width: 4px;
transition: all .4s ease;
}
::-webkit-scrollbar-track {
background: #fff; 
border-radius: 4px;
width: 4px;
}
#loader{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:100vh;
position: fixed;
z-index:100;
background-color: #202020;
width: 100%;
}
body{
height: auto;
width: 100%;
background: #fff;
}
h1 { 
color: #fcfcfc;
font-size: 28px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}

.header_down{
    height: 120px;
    position: absolute;
    width: 100%;
    background: #000;
    top: 0;
    z-index: 104;
    transition: all 300ms ease-in-out;
}
}
.hide_header #header{
opacity:0;
}
.grille{
    overflow: hidden;
position:relative;
margin-top: 0px;
width: 100%;
height: auto;
cursor: url(../images/mini-curseur.html), pointer;
}

.colonne1{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.colonne2{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.colonne3{
height: auto;   
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}

.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}

.hover_vignettes{
z-index:40;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}

.hover_color{
background:#FF0000;
background-blend-mode: difference;
}

.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8); 
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}

.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}

.vignette_horizontale:hover .informations_vignette{
    margin-top:0.5vw;
}

.hover_vignettes_vertical{
z-index:40;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}


.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}


.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8); 
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}


.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}


.vignette_verticale:hover .informations_vignette{
    margin-top:0.5vw;
}

.vignette_horizontale{
position:relative;
width:100%;
opacity:1;
}

.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}

.vignette_verticale{
position:relative;
width:100%;
opacity:1;
}

.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}

#navigation-content{
height: 100vh;
width: 100%;
position:fixed;
z-index: 50;
background-color:#020202;
transform: translateY(-200%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*
#navigation-bar{
position: fixed;
height: 100px;
width: 100%;
z-index: 3;
background:transparent;
} */
.menubar{
position: absolute;
right:4%;
top: 40%;
cursor: pointer;
opacity: .8;
transition: all .4s ease;
}
.menubar span{
position: relative;
background-color:transparent;
height:3px;
width: 20px;
display: block;
margin:6px;
border-radius: 20px;
}
.menubar .first-span{
width:35px;
}
.menubar .first-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color: #fff;
transition: all .5s ease;
}
.menubar .second-span{
width:35px;
}
.menubar .second-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar .third-span{
width:35px;
}
.menubar .third-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar:hover .second-span::before , .menubar:hover .first-span::before , .menubar:hover .third-span::before {
height: 100%;
}
.menubar:hover{
opacity: 1;
}
.close-first , .close-second{
height: 0px;
width: 35px;
background-color: #fff;
display: block;
margin: -2px;
cursor: pointer;
padding: 1px;
border-radius: 20px;
}
.close-first {
transform: rotate(45deg);
}
.close-second{
transform: rotate(-45deg);
}
.navigation-close{
position: absolute;
top: 6%;
right:4%;
padding: 10px;
cursor: pointer;
transition: all.3s ease;
opacity: .8;
}
.navigation-close:hover{
opacity: 1;
transform: rotate(90deg);
}
.logo a{ /* lookitsgraphic lorsque mernu ouvert */
position: absolute;
top: 3%;
left: 2.5%;
opacity: .8;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
.logo a:hover{
opacity: 1;
}
.header_down .logoInit{ /* lookitsgraphic fermé */
position: absolute;
top: 35%;
left: 2.5%;
opacity: .8;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
@keyframes glitch-middle {
0%,26%,30%,72%,76%,100% { transform: translate(0em,0em) skew(0deg) ; box-shadow: none }
30%,70% {transform: translate(0em,0em) skew(30deg);}
29%,31%,69%,71% {transform: translate(0em,0em) skew(0deg);}
28%,74% { box-shadow: 
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
}
}
.header_down .logoInit:hover{
opacity: 1;
}
.social-media-links{
width: 100%;
left: 0;
top: 20px;
position: absolute;
padding: 10px;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.social-media{
color: white;
width:  30px;
opacity: .8;
margin: 15px;
transition: all .4s ease;
}
.social-media:hover{
opacity: 1;
transform: scale(1.5);
}
.navigation-links{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family:poppins;
}
.navigation-links a{
padding:10px;
text-decoration: none;
color: white;
font-size: 40px;
opacity: .7;
color: rgba(252, 252, 252, 0);
-webkit-text-stroke: 1px #fcfcfc;
transition: all .4s ease;
}
.navigation-links a:hover{
opacity: 1;
color: rgba(252, 252, 252, 1);
-webkit-text-stroke: 0px;
}
.navigation-links a::before{
content: "";
position: absolute;
top:50%;
left: 50%;
display: flex;
justify-content: center;
transform: translate(-50%,-50%);
align-items: center;
font-size: 9vw;
font-weight: 400;
font-family: monoton;
color:rgb(255, 255, 255,.1);
z-index: 1;
pointer-events: none;
opacity: 0;
letter-spacing: 100px;
transition: all .4s ease;
}
.navigation-links a:hover::before{
content: attr(data-text);
opacity: 1;
letter-spacing: 10px;
}
/* transition */
#breaker{
height: 300vh;
width: 120%;
background-color: #fff;
opacity: 1;
animation: breakeranimate 1.5s linear;
display: none;
transition: all .4s ease;
z-index: 10;
transform: rotate(15deg);
position: fixed;
transform : translateY(-100%);
}
@keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
}
@-webkit-keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
}
@keyframes scale{
0%{
    transform: scale(.6);
    }
100%{
    transform: scale(1);
    }
}
@-webkit-keyframes breakeranimate{
0%{
    transform: scale(.6);
    }
100%{
transform: scale(1);
    }
}

.colors{
color: #fff;
}

.html{
display: inline-block;
position: absolute;
left: 5%;
top:30%;
}

    
.cursor{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
mix-blend-mode:difference;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition:  scale .5s ease;
}
.cursor-small{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition:  scale .4s ease;
}
.icon{
height:40px;
opacity: .8;
}

/* Mobiles */
@media only screen and (max-width: 650px){
.grille{
z-index : 98;
height: auto;
margin-top:15px;
width:100%;
}

.colonne1{
height: auto; 
position: relative;
width: 100%;
float: left;
}


.colonne2{
height: auto; 
position: relative;
width: 100%;
float: left;
}

.colonne3{
height: auto; 
position: relative;
width: 100%;
float: left;
}

.hover_vignettes{
display:none;
}

.hover_vignettes_vertical{
display:none;
}

.navigation-links a{
    font-size: 20px;
}
#breaker{
    height: 300vh;
    width: 200%;
    background-color: #fff;
    opacity: 1;
    animation: breakeranimate 3s linear;
    display: none;
    z-index: 60;
    transform: rotate(15deg);
    position: fixed;
    transform : translateY(-100%);
    }
@keyframes breakeranimate{
    0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
    50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
    100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
    }
@-webkit-keyframes breakeranimate{
    0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
    50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
    100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
    }
.social-media-links{
    display: none;
    }
.cursor{
    display: none;
    }
.header_down .logoInit{
    cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
    position: absolute;
    top: 32%;
    left: 3%;
    opacity: 1;
    transition: all .4s ease;=
    }
.logo a{
    display: none;
    }
}
       
/* for tabs  */
@media all and (max-width: 1025px) and (min-width: 651px){

h1{
    font-size : 25px;
    }
.navigation-links a{
    font-size: 30px;
}
.social-media-links{
    width: 100%;
    left: 0;
    top: 15px;
    position: absolute;
    padding: 10px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#breaker{
    height: 300vh;
    width: 120%;
    opacity: 1;
    animation: breakeranimate 2s linear;
    display: none;
    z-index: 60;
    transform: rotate(15deg);
    position: fixed;
    transform : translateY(-100%);
    }
@keyframes breakeranimate{
    0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
    50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
    100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
    }
@-webkit-keyframes breakeranimate{
    0%{ transform : translateX(-150%) rotate(15deg)  translateY(-50%);}
    50%{ transform : translateX(0%) rotate(15deg)  translateY(-50%);}
    100%{ transform : translateX(150%) rotate(15deg)  translateY(-50%);}
    }
.cursor{
    display: none;
    }
.colonne1{
height: auto; 
position: relative;
width: 100%;
float: left;
}


.colonne2{
height: auto; 
position: relative;
width: 100%;
float: left;
}

.colonne3{
height: auto; 
position: relative;
width: 100%;
float: left;
}
.hover_vignettes{
width:32vw;
height:32vw;
left:0;
right:0;
top:12.5vw;
border:0px solid #2d2d2d; 
opacity: 0;
}


.hover_vignettes p{
margin-top:37%;
font-size:3vw;
}

.hover_vignettes_vertical{
width:32vw;
height:32vw;
left:0;
right:0;
top:50vw;
border:0px solid #2d2d2d; 
opacity: 1;
}
.hover_vignettes_vertical p{
margin-top:37%;
font-size:3vw;
}

.image_horizontale video {
    position: relative;
    margin-bottom: 10px;
}

.hover_vignettes {
display:none;
}

.hover_vignettes_vertical {
display:none;
}

}

@media all and (max-width: 9000px) and (min-width: 1441px){
.navigation-links a{
    font-size: 50px;
}
.grille{
    margin-top: 0px;
}
}

我找不到解决方案...有谁知道这个问题的解决方案吗？

感谢您对此事的考虑。

Answer 1

我终于删除了行 .grille {margin-top: 7.1vw;} 并解决了问题。

Css - menu-wrapper的显示定位问题

Css - Display positioning problems of menu-wrapper

menu

wrapper