我网站的内容被隐藏，滚动条以移动屏幕的高度结束，这只发生在特定的移动布局上，其他移动布局工作正常
我正在练习响应式布局，但我遇到了奇怪的问题，如上图所示，内容隐藏在特定的移动布局中，我需要滚动条才能工作
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
html{
font-size:10px;
scroll-behavior: smooth;
}
body{
margin:0;
padding: 0;
font-family: "Roboto", sans-serif;
}
.header{
/* padding:14.6rem 4.5rem; */
height:100vh;
/* padding:12rem 0; */
/* min-width:100%; */
background-color: #23424A;
color: white;
/* padding-top: 150px; */
display: flex;
flex-direction: column;
justify-content: center;
}
header>section{
max-width:min(65%,100%);
margin:0 7rem;
}
header>section>h1{
font-family: "Roboto", sans-serif;
font-weight: 900;
font-style: normal;
font-size:clamp(2.5em,3.8vw,12.5em);
/* font-size:8vmin; */
margin-top:14px;
padding:1rem 0 0 0;
}
header>section >p{
font-family: "Roboto", sans-serif;
font-weight:380;
font-style: normal;
max-width:90%;
font-size:clamp(1.2em,2vw,10em);
margin:14px 0 14px 0;
padding:1rem 0 1rem 0;
}
button{
padding:1em 3.7em;
border-radius: 50px;
border: none;
background-color: #38CFD9;
font-family: "Roboto", sans-serif;
font-weight:700;
font-size:clamp(.5em,1vw,3.5em);
color:#132327;
}
main{
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}
main > section{
padding:2rem 0;
width:80%;
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:2rem;
}
main > section > div{
background:#578a9621;
color:#23424A;
/* max-width: ; */
padding:1rem;
margin:1rem;
border-radius: 1em;
}
main > section > div > h3{
font-size:clamp(2em,2vw,5em);
padding: .2em;
}
main > section > div > p{
font-size:clamp(.5em,1.3vw,5em);
padding: .2em;
}
@media(max-width:800px){
.header, main{
padding:2.5rem 0;
height:auto;
}
main > section{
display: block;
}
}
footer{
max-width:100%;
background-color: #325d67d8;
min-height:10em;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
footer p{
font-size:clamp(.8em,1.5vw,3.5em);
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="figma-css.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<section>
<h1>Responsive layouts don’t have to be a struggle</h1>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
<button>I WANT TO LEARN</button>
</section>
</header>
<main>
<section>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
</section>
</main>
<footer>
<section>
<p>@inc 2012 created by ambrish</p>
</section>
</footer>
</body>
</html>是的，这似乎很好，因为我看不到这样的问题，你能告诉我这个问题在什么视口宽度下出现吗