页面无法滚动：需实现背景图后可滚动白色空白区域

问题根源 #

• body 设置的 min-height: 100vh 仅保证页面最小高度为视口高度，无额外内容时不会向下延伸
• .box 使用 position: fixed 脱离文档流，无法撑开页面高度，且存在无效CSS属性（如 top: px）
• 背景图直接绑定在 body 上会覆盖整个页面，无法实现「首屏背景图+后续白色背景」的分层效果

修改后的代码 #

CSS

@font-face {
    font-family: 'Hittedal';
    /*src: url(Hittedal.ttf) format('truetype');*/
}

body {
    margin: 0;
    padding: 0;
    background-color: white; /* 设置全局默认背景为白色 */
}

/* 新增首屏背景容器 */
.hero {
    min-height: 100vh;
    background: url('https://picsum.photos/200/300');
    background-size: cover;
    background-position: center;
}

.header {
    padding: 20px 100px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    box-shadow: 0px 11px 20px 3px rgba(255,255,255,0.76);
}

.logo {
    font-size: 35px;
    /*font-family: "Hittedal" ;*/
    color: white;
    text-decoration: none;
    font-weight: 300;
}

.navbar a {
    position: relative;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
    font-size: 20px;
    color: white;
    font-weight: 500;
    text-decoration: none;
    margin-left: 40px;
}

.navbar a::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0%;
    height: 2px;
    background: white;
    transition: .3s;
}
.navbar a:hover::before {
    width: 100%;
}

.text1 {
    position: fixed;
    top: 325px;
    left: 150px;
    width: 500px;
    font-size: 25px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
    background-color:rgb(128, 128, 128, .3);
    border: none;
    border-radius: 15px;
    padding: 19px;
}

.box{
    /* 移除fixed定位，改为正常文档流元素 */
    width: 100%;
    min-height: 500px; /* 设置最小高度确保页面可滚动，可按需调整 */
    background-color: white;
}

HTML

<div class="hero">
    <header class="header">
        <a href="" class="logo">Pizza&Pasta Lina</a>

        <nav class="navbar">
            <a href="">Home</a>
            <a href="">Speisekarte</a>
            <a href="">Bilder</a>
            <a href="">Kontakt</a>
        </nav>
    </header>
    <div class="text1">
        <!-- 可添加首屏文本内容 -->
    </div>
</div>
<div class="box">
    <p>后续操作内容区域</p>
    <!-- 可添加更多内容 -->
</div>

关键修改说明 #

1. 新增.hero容器：将首屏背景图和头部导航包裹其中，设置min-height:100vh确保占满整个视口高度
2. 调整body样式：移除min-height:100vh，设置默认背景为白色，让后续页面自然继承该背景
3. 修复.box定位：去掉position:fixed，设置width:100%和min-height，使其作为正常文档流元素撑开页面，实现滚动效果
4. 清理无效代码：删除.text1和.box中语法错误的属性（如bottom: ;、top: px）

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