修改body的overflow为scroll后网页仍无法滚动且无法添加新元素

问题根源 #

你的代码里有两个关键限制导致内容无法扩展：

• body 设置了固定高度 height: 1360px，强制页面高度固定，新增内容超出这个高度就会被隐藏；同时多余的 overflow: scroll 没必要，浏览器默认会在内容超出视口时自动显示滚动条。
• .yappin 设置了固定高度 height: 744px，内部文本已经撑满这个高度，新增段落会被容器截断。
• 固定定位的 .header 用了固定宽度 1904px，在小屏幕上会溢出，而且会遮挡页面顶部内容。

修复步骤 #

1. 移除body的固定高度和强制滚动设置：让body根据内容自动调整高度，浏览器会自动处理滚动。
2. 移除.yappin的固定高度：让容器随内部文本自动撑开。
3. 适配header的宽度并避免遮挡内容：把header的宽度改成 width: 100%，同时给body添加 padding-top: 150px（和header高度一致），防止顶部内容被固定导航遮挡。
4. 优化间距处理：可以把 .spacing3 改成用padding代替单独的div，让代码更简洁。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relmercc</title>
    <link rel="icon" href="https://img.icons8.com/?size=100&id=U5Pp4XpKz9ap&format=png&color=000000">
    <style>
        .header{                                               
            background-color: #404040;
            border: none;
            border-radius: 5px;
            position: fixed;
            width: 100%; /* 改成100%适配所有屏幕 */
            height: 150px;
            top: 0; /* 明确固定在顶部 */
            left: 0;
        }
        .header-logo-img{                        
            height: 150px;
        }
       
        .right_header{                           
            color: #fff; 
            position: absolute; 
            top: 60px; 
            right: 100px; 
            font-size: x-large; 
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        .yappin{         
            background-color: #8fe3c6;
            /* 移除固定height，让容器自动撑开 */
            border: none;
            border-radius: 8px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding-top: 100px; /* 用padding代替spacing3的div */
        }
        .spacing2{height:7px}  
        /* 移除spacing3的样式，改用padding */
        .yapintxt{               
            margin-right: 100px;
            margin-left: 100px;
            color: white;
            font-size:x-large; 
            margin-bottom:20px;
        }
        body {
            width: 100%;
            margin: 0;
            padding: 150px 0 0 0; /* 顶部padding避开header，左右底部留0 */
            /* 移除固定height和overflow:scroll */
        }
    </style>
</head>
<body>
    <div class="header">
        <img class="header-logo-img" src="C:\Users\Stepan\Downloads\Relmercc-23-07-2024.png" alt="My Image"> 
        <div id="spacing1">
            <span class="right_header">Buy clothes</span>
        </div>
    </div>
    <div class="spacing2"></div>   
    <div class="yappin">
        <!-- 移除spacing3的div，改用yappin的padding-top -->
        <p class="yapintxt">Relmercc has reached the very top among the dynamic scenes that change with every beat in style, through the amalgamation of modern taste with environmental sustainability. With innovation through ethical production as the very premise upon which this brand was based, Relmercc has made a niche for itself within the cutthroat competition in modern clothing. The brand is proud of its craftsmanship, shown in every single stitch—from traditional techniques with the incorporation of state-of-the-art design. With Relmercc, every piece basically strikes a balance between style and conscience, which appeals to the conscientious consumers who seek trend-setting looks and sustainable choices.</p>

        <p class="yapintxt">Basically, sustainability is at the heart of Relmercc's philosophy. Most fast fashion giants are not so close to environmental accountability, but Relmercc does its best to be friendly to the environment across the supply chain. From responsible sourcing and production to more thoughtful designing in order to reduce wastes, all decisions are made considering the welfare of the planet. Through such championing of transparency and accountability, Relmercc has set new standards in the industry and inspired a generation of mindful consumers to make informed choices about their fashion purchases. For the brand, this is an incredibly clear imperative: A rising community of people finds sustainability at the heart of modern living.</p>
        
        <p class="yapintxt">Moreover, Relmercc stands to lead the way in the charge for inclusivity and diversity in fashion. This brand celebrates the beauty of individuality, embracing differences in its designs and catering to an extraordinarily wide spectrum of tastes and preferences. Embracing inclusivity places Relmercc at the heart of building a platform that makes fashion a way for every being to express themselves. From gender-neutral collections to size-inclusive ranges, Relmercc empowers people to confidently be themselves in clothes that fit well but embody personal values. Basically, Relmercc represents more than a clothing brand but a step forward toward an all-inclusive, more mindful high-fashion future.</p>
        
        <!-- 新增的段落现在可以正常显示了 -->
        <p class="yapintxt">这是新增的测试段落，现在可以正常显示在页面中，并且页面会自动滚动展示所有内容。</p>
    </div> 
    <div class="spacing2"></div>
</body>
</html>

效果说明 #

修改后，页面会根据内容自动调整高度，新增的内容会正常显示，滚动条也会在内容超出视口时自动出现；同时header适配不同屏幕宽度，不会遮挡顶部内容。

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