如何让CSS Grid布局中内容Div填充Header后的剩余屏幕高度？

核心问题分析 #

1. 底部空白：当前代码硬算内容区高度（calc(100vh - 75px)）容易出现误差，且body高度设置未完全铺满视口
2. 左侧区块等高：你提到的grid-auto-rows: 1fr思路正确，只需配合页面整体布局调整即可生效

解决方案代码 #

修改后的HTML（仅移除冗余属性）

<body>
    <header>
        <div class="logo"><h2>Travelto</h2></div>
        <div class="search-bar"></div>
        <nav>
            <a href="">Home</a>
            <a href="">Blog</a>
            <a href="">Services</a>
            <div id="profile-picture"></div>
        </nav>
    </header>
    <div class="wrapper-grid">
        <section class="about">
           <h1>Explore The World With Us</h1>
            <p>Discover breathtaking destnations.                
                Start your adventure today!
            </p>
        </section>
        <aside>
            <article>
                <h2>Going somewhere?</h2>
                <p>Are you in the midst of planning a trip and feeling overwhelmed by the multitude of destinations, offers, and prices available?</p>
                   </article>
            <article>
                <h2>We got you covered.</h2>
                <p>We're here to assist you in discovering the finest hotels at the most competitive prices, offering you a selection of hundreds of options to choose from.</p>
            </article>
            <button>More info</button>
        </aside>
        <section class="call-to-action">
            <h3>Unforgettable journeys are waiting for you.</h3>
            <button>Book now</button>
        </section>
    </div>
</body>

修改后的CSS（关键调整已标注）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}
/* 新增：让根元素铺满视口 */
html, body {
    height: 100%;
    margin: 0;
}
body {
    background: linear-gradient(30deg,#5ba591 , #050a26);
    background-repeat: no-repeat;
    background-attachment: fixed; /* 新增：防止渐变重复 */
    max-width: 1200px;
    margin: 0 auto;
    /* 修改：将body设为Grid容器，自动分配header和内容区高度 */
    display: grid;
    grid-template-rows: auto 1fr;
}
header {  
    /* 移除冗余的grid-column属性，header不在wrapper-grid容器内 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    margin: 0 auto;
}
header nav {
    display: flex;
    align-items: center;
}
header nav a {
    text-decoration: none;
    margin-left: 20px;
}
 header nav #profile-picture {
    display: inline-block;
    height: 35px;
    width: 35px;
    background: #ffffff;
    border-radius: 50%;
    margin-left: 30px;
 }
.wrapper-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-auto-rows: 1fr; /* 保留你的代码，实现左侧区块等高 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    /* 移除硬算高度的代码，由body的Grid布局自动控制 */
}

.about {
    grid-column: span 2;
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    padding: 30px;
    border-radius: 6px; 
    background-color:  rgba(5,10,38,0.3); 
}
.about h1 {
     font-size: 3rem;
}
.about p {
        font-size: 1.2rem;
}
aside {
    grid-column: 3;
    grid-row: span 2;
    display: grid;
    gap: 30px;
    padding: 30px;
    border-radius: 6px; 
    background-color: rgba(14,155,134,0.2);   
}
aside article p {
    padding: 10px 0;
}
aside button {
    justify-self: center;
    background: #000;
    font-weight: 600;
    border: none;
    padding: 10px 30px;
    border-radius: 6px; 
}
.call-to-action {
    grid-column: span 2;
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 30px;
    border: #5ba591 1px solid;
    border-radius: 6px; 
}
.call-to-action button {
    justify-self: center;
    background: #ffc500;
    color: #000;
    font-weight: 600;
    border: none;
    padding: 10px 30px;
    border-radius: 6px; 
}

效果说明 #

1. 底部空白消除：通过将body设为Grid容器，用auto适配Header高度，1fr让内容区自动占满剩余视口空间，无需硬算高度
2. 左侧区块等高：grid-auto-rows: 1fr让.wrapper-grid内的两行自动均分高度，确保.about和.call-to-action始终等高
3. 背景铺满视口：添加background-attachment: fixed避免渐变因内容高度不足出现空白

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