高度和LT上的滚动车身; 900px

Question

试图做出响应式设计。

有3个带有背景的按钮，这些按钮位于底部，当我的身高900px时消失了。
我尝试了Max-Height：900px，带有Overflow-y：auto; auto;，但按钮消失了，只是徽标和文字。 正如我在运行代码中看到的那样，您无法看到按钮，因为高度很低，并且不会滚动

```css


body {
background-color: black;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("../Bloc\ Nisipari/View03.jpg") no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover;    /* Mozilla*/
-o-background-size: cover;      /* Opera*/
background-size: cover;         /* Generic*/
margin: 0;
width: 90%;
height: 100%;
max-width: 100%;
overflow: hidden;
max-height: 750px;


   
 
  } 
 

  div1
  {
color: white;
position: relative; 
left:200px;
top:300px; 
width: 200px;
height: auto;
margin: auto;
font-size:24px;
   font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
   
  }
  .textlogo
  {
  width: 500px;
  }
  .logo{
  width: 300px;
  }


.container
{
position: relative;
left: 200px;
top: 500px;
width:100%; 
height: auto;
min-height: 100vmax;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
   
transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: 0;
right: -13%;
opacity:1;
z-index: -1;
}
@media only screen and (max-width: 900px)
{
div1
{
  color: white;
  position: fixed; 
  left: 60px;
  top:50px; 
  width: 300px; /*Takes 90% width from WebContainer*/
  height: auto;
  margin: auto;
  font-size:18px;
 font-family: 'montserrat';
 src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")

}
.textlogo
{
    width:90%
    
    
}
.logo
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
    width: 200px;
}
.container
{
position: fixed;
left: 60px;
top: 300px;
width:200px; /*Takes 90% width from WebContainer*/
height: auto;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 50px;
left: 30px;
font-size:32px;
   
transition: ease-out 0.3s;
background-color: transparent;

outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 100px;
left: 30px;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 150px;
left: 30px;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: -5%;
right: -20%;
opacity:1;
z-index: -1;
}
  
}

@media only screen and (max-width: 350px)
{
div1
{
  color: white;
  position: fixed; 
  left: 10px;
  width: 250px;

  height: auto;
  margin: auto;
  font-size:18px;
 font-family: 'montserrat';
 src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")

}

.textlogo
{
    width: 240px;
    margin-left: auto;
}
.logo
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    
}
.container
{
position: fixed;
left: 00px;
top: 300px;
width:200px; /*Takes 90% width from WebContainer*/
height: auto;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 20px;
margin-left: auto;
    margin-right: auto;
font-size:32px;
   
transition: ease-out 0.3s;
background-color: transparent;

outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 30px;
margin-left: auto;
    margin-right: auto;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 40px;
margin-left: auto;
    margin-right: auto;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
   }

   .btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: -5%;
right: -20%;
opacity:1;
z-index: -1;
}
  
}






  

body {
background-color: black;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("../Bloc\ Nisipari/View03.jpg") no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover;    /* Mozilla*/
-o-background-size: cover;      /* Opera*/
background-size: cover;         /* Generic*/
margin: 0;
width: 90%;
height: 100%;
max-width: 100%;
overflow: hidden;
max-height: 750px;


   
 
  } 
 

  div1
  {
color: white;
position: relative; 
left:200px;
top:300px; 
width: 200px;
height: auto;
margin: auto;
font-size:24px;
   font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
   
  }
  .textlogo
  {
  width: 500px;
  }
  .logo{
  width: 300px;
  }


.container
{
position: relative;
left: 200px;
top: 500px;
width:100%; 
height: auto;
min-height: 100vmax;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
   
transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: 0;
right: -13%;
opacity:1;
z-index: -1;
}
@media only screen and (max-width: 900px)
{
div1
{
  color: white;
  position: fixed; 
  left: 60px;
  top:50px; 
  width: 300px; /*Takes 90% width from WebContainer*/
  height: auto;
  margin: auto;
  font-size:18px;
 font-family: 'montserrat';
 src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")

}
.textlogo
{
    width:90%
    
    
}
.logo
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
    width: 200px;
}
.container
{
position: fixed;
left: 60px;
top: 300px;
width:200px; /*Takes 90% width from WebContainer*/
height: auto;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 50px;
left: 30px;
font-size:32px;
   
transition: ease-out 0.3s;
background-color: transparent;

outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 100px;
left: 30px;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 150px;
left: 30px;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: -5%;
right: -20%;
opacity:1;
z-index: -1;
}
  
}

@media only screen and (max-width: 350px)
{
div1
{
  color: white;
  position: fixed; 
  left: 10px;
  width: 250px;

  height: auto;
  margin: auto;
  font-size:18px;
 font-family: 'montserrat';
 src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")

}

.textlogo
{
    width: 240px;
    margin-left: auto;
}
.logo
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    
}
.container
{
position: fixed;
left: 00px;
top: 300px;
width:200px; /*Takes 90% width from WebContainer*/
height: auto;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 20px;
margin-left: auto;
    margin-right: auto;
font-size:32px;
   
transition: ease-out 0.3s;
background-color: transparent;

outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 30px;
margin-left: auto;
    margin-right: auto;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 40px;
margin-left: auto;
    margin-right: auto;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: -5%;
right: -20%;
opacity:1;
z-index: -1;
}
  
}

<div1>

  <img class="logo" src="../site/image/logo.png" alt="logo">
  <p class="textlogo">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>

</div1>
<div class="container">
  <button class="btn-1"><span>proiectare</span></button>

  <button class="btn-2"><span>constructii</span></button>

  <button class="btn-3"><span>infrastructura</span></button>
</div>



<h1> </h1>

<p>

</p>