如何移除移动端CSS区块顶部的空白区域？

问题描述 #

正在做网站响应式适配，确保移动端正常显示，但缩小页面宽度时，第一个设置position: relative的元素（上方导航栏为absolute定位）顶部出现空白区域。

已做的排查动作：

• 将该区域所有div的margin-top、margin、padding设为0
• 移除网站其他所有区块，排除无关代码影响
• 移除所有position: relative属性并添加overflow: hidden
• 全局CSS已设置padding: 0和margin: 0，检查主容器确认空白非容器本身导致

界面状态说明 #

• 主容器检查：Opera浏览器中主容器无额外边距/内边距
• 空白区域示例：页面顶部出现明显空白，挤占了内容的预期位置
• 预期效果：顶部无空白，内容紧贴页面顶部显示

相关代码 #

Cover.module.css #

.cover {
    height: 100%;
    width: 100vw;
    padding: 8vh 10px 0 4vw;
    position: relative;
    color: #F0F0F0;
}

.wrap {
    height: max(45vw,50vh);
    overflow: hidden;
    position: relative;
    background-color: #010F3D;
    margin-top: 10vh;
}

.bg {
    opacity: 0.05;
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
}

.fakeBtn {
    background-color: #610770;
    width: 25vw;
    height: 11vh;
    padding: 1%;
    border-radius: 15px;
    font-size: max(2.6vw,18px);
}

.horizontalSplit {
    display: flex;
}

.secondColumn{
    text-align: center;
    width: 30%;
    padding-top: 2vh;
    margin-left: 1vw;
}

.firstColumn {
    width: 70%;
}

.verticalAlign {
    display: flex;
    align-items: center;
}

.line {
    margin-bottom: 2vh;
}

.subtitle {
    padding-right: 2vw;
    text-align: right;
    margin-left: 10vw;
}


@media (max-width: 600px) {
    .wrap {
        margin: 0px;
        overflow-x: hidden; 
        height: 45vh;
    }
    .cover {
        margin-top: 0;
    }

    .firstColumn {
        width: 100%;
    }

    .secondColumn{
        width: 0;
    }

    .subtitle {
        margin-left: 0;
    }

    .bg {
        height: 50vh;
        left: auto;
        right: 0;
    }
}

Cover.js（NextJS） #

import styles from '../../styles/Cover.module.css'
import Image from 'next/image';

export default () => {
    return (
        <div className={styles.wrap}>
            <img className={styles.bg} src='/Back_Cover.png' alt=""/>
            <div className={styles.cover}>
                {/** 两列布局容器，高度100vh */}
                <div className={[styles.horizontalSplit].join(" ")}>
                    {/** 第一列，占70%宽度 */}
                    <div className={[styles.firstColumn].join(" ")}>
                        {/** 第一行：标题行，包含两列 */}
                        <div className={[styles.horizontalSplit, styles.line, styles.verticalAlign].join(" ")}>
                            {/** 左侧控制器图标 */}
                            <div style={{width: "13%", minWidth: "32px"}}> 
                                <Image src='/Controle_L.png' layout="responsive" width={480} height={1024} />
                            </div>
                            {/** 标题文本 */}
                            <div style={{paddingLeft: "2vw"}}>
                                <h1>Conectamos talentos a indústria de games</h1>
                            </div>
                        </div>
                        {/** 第二行：副标题行，包含两列 */}
                        <div className={[styles.horizontalSplit, styles.line, styles.verticalAlign].join(" ")}>
                            {/** 副标题文本 */}
                            <div className={styles.subtitle}>
                                <h2>Buscamos de forma personalizada o profissional perfeito para alavancar o projeto do seu game</h2>
                            </div>
                            {/** 右侧控制器图标 */}
                            <div style={{width: "15%", minWidth: "30px"}}>
                                <Image src='/Controle_R.png'  layout="responsive" width={480} height={1024}/>
                            </div>
                        </div>
                        {/** 第四行：CTA按钮行 */}
                        <div className={styles.line}>
                            {/** 模拟按钮 */}
                            <a href='' target="_blank">
                                <div className={[styles.fakeBtn, styles.verticalAlign, styles.secondColumn].join(" ")} style={{justifyContent:"center"}} >
                                    Entre em contato
                                </div>
                            </a>
                        </div>

                    </div>

                    {/** 第二列：右侧图标列 */}
                    <div className={[styles.secondColumn].join(" ")}>
                        <Image src='/Right_Cover.png' width={250} height={250}/>
                    </div>
                </div>
            </div>
        </div>
    );
}

global.css #

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  overflow-x:hidden;
  font-size: max(1.3vw,15px);
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}

h1 {
  font-size: max(5vw,35px);
  margin: 0;
}

h2 {
  font-size: max(2.5vw,18px);
  margin: 0;
}

h3 {
  font-size: max(2vw,18px);
  margin: 1vw 0 1vw 0;
}

p{
  line-height: max(2vw,15px);
}


@media (max-width: 600px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.2em;
  }
}

解决方案 #

问题出在.cover元素的padding-top: 8vh——移动端你只重置了.cover的margin-top，但没清除它的内边距。

修改移动端媒体查询代码，给.cover添加padding-top: 0：

@media (max-width: 600px) {
    .wrap {
        margin: 0px;
        overflow-x: hidden; 
        height: 45vh;
    }
    .cover {
        margin-top: 0;
        padding-top: 0; /* 新增这行，清除顶部内边距 */
    }
    /* 其他原有代码保持不变 */
}

额外检查点：如果导航栏是固定在顶部的，确保它设置了top: 0和width: 100%，避免占位错位；同时给导航栏加z-index: 999，防止被下方内容遮挡。

内容的提问来源于stack exchange，提问作者HydroBR