移动端vh单位失效问题：求纯CSS解决方案

问题现象 #

代码在笔记本、iPad尺寸下可正常实现背景占满可用高度，但在手机端背景高度仅显示图片默认高度，无法铺满页面。

问题原因 #

.landing 类中设置了 min-width: 620px，该属性强制元素最小宽度为620px，而手机屏幕宽度普遍小于这个值，导致页面横向溢出；同时 height: calc(100vh - 80px) 基于视口高度计算，无法适配溢出后的实际页面高度，最终背景无法铺满。此外，未重置 html 和 body 的默认边距，可能导致高度计算出现偏差。

修复方案 #

• 移除 .landing 的 min-width: 620px 属性，让元素宽度自适应设备屏幕
• 在全局规则中添加 html, body { margin: 0; padding: 0; }，重置默认边距，确保高度计算准确

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
   <style> 

/*  Beginning of global variables*/
:root {
    --main-color: #11cab7;
}
/* End of global variables */
/* Beginning of Global rules */
* {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Work Sans', sans-serif;
}
.container {
    width: 600px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/*.Small.*/

@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium.*/
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* End of global rules */

/* Begin of header styling */
.header {
    padding: 20px;
}
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    width: 100px;
    height: 40px;
}
.links {
    position: relative;
}
.header .links .icon {
    width: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor: pointer;
}
.header .links .icon span {
    background-color: #333;
    height: 2px;
    margin-bottom: 5px;
}
.header .links .icon span:first-child {
    width: 100%;
}
.header .links .icon span:nth-child(2) {
    width: 60%;
    transition: .3s linear;
}
.header .links .icon span:last-child {
    width: 100%;
}
.header .links .icon:hover span:nth-child(2){
    width: 100%;
}


.header .container ul {
    list-style-type: none;
    display: block;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 200px;
    padding: 0;
    right: 0;
    display: none;
}
.header .container ul::before {
    content: "";
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #f6f6f6 transparent;
    position: absolute;
    right: 5px;
    top: -20px;
}
.header .container ul li {
    display: block;
    padding: 15px;
    transition: .2s;
   
}
.header .container ul li:hover {
    padding-left: 25px;
}
.header .container ul li a {
    text-decoration: none;
    color: #333;
}
.header .container ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.header .container .links:hover ul {
    display: block;
    transition: 0.1s;
    z-index: 1;
}
/* End of header styling */
/* Beginning of landing section */

.landing {
    background-image: url(https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/landing.jpg);
    background-size: cover;
    height: calc(100vh - 80px);
    position: relative;
}
.landing .intro-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 320px;
    max-width: 100%;
}
.landing .intro-text h1 {
    margin: 0;
    font-size: 50px;
    color: var(--main-color);
}
.landing .intro-text p {
    font-size: 19px;
    line-height: 1.8;
}




/* End of landing section */


</style>
    <!-- Google fonts -->
    <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=Work+Sans:wght@200;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
   
        <!-- The use of the container is that our text not start from
        the beginning of the webpage as it is visually not good -->
        <!-- Beginning of header -->
        <div class="header">
            <div class="container">
                <img class="logo" src="https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/logo.png" alt="logo image" >
                <div class="links">
                    <span class="icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <ul>
                        <li>
                            <a href="#services">Services</a>
                        </li>
                        
                        <li>
                            <a href="#portfolio">Portfolio</a>
                        </li>

                        <li>
                            <a href="#about">About</a>
                        </li>

                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- End of header -->
        <!-- Beginning of sections -->
        <div class="landing">
            <div class="intro-text">
                <h1>Hello there</h1>
                <p>We are Leon - Super creative and minimal agency
                    Web Template
                </p>
            </div>
        </div>

        <!-- End of sections -->
</body>
</html>

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