特定移动端宽度下内容隐藏、滚动失效问题求助

问题描述 #

练习响应式布局时遇到异常：特定移动端布局下，网站内容被隐藏，滚动条仅能到达手机屏幕高度，无法滚动查看全部内容，但其他移动端布局显示正常。

相关代码 #

CSS代码 #

*{
    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代码 #

<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>

问题原因与解决方案 #

原因分析 #

问题出在main元素的样式设置上：默认给main设置了height:100vh，同时用display:flex+align-items:center实现内容垂直居中。在移动端媒体查询中，虽然将main的height改为auto，但**align-items:center未被重置**。当main内的内容高度超过视口时，align-items:center会导致内容溢出容器却无法触发滚动——flex容器在垂直居中状态下，溢出的内容会被裁切，滚动区域仅局限于视口高度。

解决方法 #

方法一：重置移动端main的垂直对齐方式

在移动端媒体查询中，给main添加align-items:flex-start，让内容从顶部开始排列：

@media(max-width:800px){
    .header, main{
        padding:2.5rem 0;
        height:auto;
    }
    main{
        align-items:flex-start; /* 新增该行，重置垂直对齐 */
    }
    main > section{
        display: block;
    }
}

方法二：移除flex垂直居中，改用padding实现间距

直接修改main的默认样式，移除height:100vh和align-items:center，用上下padding替代垂直居中效果：

main{
    /* 移除原有height和align-items */
    padding: 4rem 0;
    display: flex;
    justify-content: center;
}

两种方法都能解决移动端内容无法滚动的问题，确保所有内容完整显示。

内容的提问来源于stack exchange，提问作者A.Ambrish