移动端优先设计中container div无法占满body宽度求助

问题描述 #

采用移动端优先设计时，小屏幕下红色的container容器宽度小于蓝色的body，调整宽度数值后仍无法实现理想的响应效果，同时对宽高单位的合理性存在疑问。

相关代码 #

CSS 代码 #

/* Mobile First */

body {
   height: 100vh;
   margin: 0;
   font-family: 'Josefin Sans', sans-serif;
   background-color: blue; /* remover */
}

.container {
   width: 100%;
   display: absolute;
   background-color: red; /* remover */
   background-repeat: repeat;
}

.logo {
   margin: 40px 10%;
}  

.wallpaper-left {
   min-height: 15.6em;
   max-height: 250px;
   background-image: url("./images/hero-mobile.jpg");
   background-size: cover;
   background-repeat: no-repeat;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     <!-- displays site properly based on user's device -->

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap" rel="stylesheet">
    <link href="estilo.css" rel="stylesheet">

    <title>Frontend Mentor | Base Apparel coming soon page</title>

</head>

<body>

    <div class="container">
        <div class="left">
            <img class="logo" alt="logotipo" src="./images/logo.svg" width="158px" height="33px"></img>
            <div class="wallpaper-left"></div>
            <div class="texts">
                <p class="title-top">We're</p>
                <p class="title-bottom">coming</p>
                <p class="title-bottom">soon</p>
                <p class="description">
                    Hello fellow shoppers! We're currently building our new fashion store.
                    Add you email below to stay up-to-date with announcements and our launch deals.
                </p>
            </div>
            <div class="field-container">
                <div id="field" class="field">
                    <input class="email-field" type="email" placeholder="Email Address">
                    <a class="button highlight">></a>
                </div>
            </div>
            <div class="warning-container">
                <p id="warning" class="warning-hidden">Please provide a valid email</p>
            </div>
        </div>
        <div class="right">
            <div class="wallpaper-right"></div>
        </div>
    </div>

 </body>

</html>

问题根源与修复方案 #

1. 核心错误：无效的display属性 #

container中的display: absolute是完全错误的写法——CSS的display属性不存在absolute这个取值，你可能混淆了display和position属性。这个错误会导致浏览器无法正确解析容器的盒模型，进而导致宽度计算异常。

2. 修复步骤 #

（1）修正容器样式

删除错误的display: absolute，保持容器默认的块级元素特性，此时width: 100%会让容器自动填满父元素（body）的宽度：

.container {
   width: 100%;
   /* 移除 display: absolute */
   background-color: red; /* remover */
   background-repeat: repeat;
}

（2）优化body高度设置

原代码中body使用height: 100vh会固定高度为视口高度，当页面内容超过视口时，body不会自动撑开，建议改为min-height: 100vh：

body {
   min-height: 100vh; /* 替换 height: 100vh */
   margin: 0;
   font-family: 'Josefin Sans', sans-serif;
   background-color: blue; /* remover */
}

（3）单位合理性确认

你使用的单位是符合移动端优先设计的：

• vh：适配视口高度，保证页面在不同设备上的基础高度
• em：相对字体大小，实现响应式的元素高度
• px：用于固定尺寸的元素（如logo），保证品牌标识的一致性

3. 额外优化建议 #

• 给容器添加box-sizing: border-box，避免后续添加内边距或边框时导致宽度溢出：

.container {
   width: 100%;
   box-sizing: border-box;
   background-color: red; /* remover */
   background-repeat: repeat;
}

• 移动端下修改logo的尺寸设置，改用max-width保证自适应：

<img class="logo" alt="logotipo" src="./images/logo.svg" style="max-width: 158px; height: auto;">

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