CSS Grid点击元素后高度溢出：原因分析及无滚动全屏修复方案

当前代码在点击图片切换布局时，内容会超出浏览器高度引发滚动。需要解决两个问题：

1. 为什么grid-auto-rows: fit-content(50%) fit-content(50%);无法阻止内容溢出？
2. 如何修复实现所有元素在单页内可见、无滚动的效果？

1. grid-auto-rows作用范围错误：这个属性仅负责定义自动生成的网格行的尺寸，但当前布局里，无论是默认状态还是点击后的状态，网格行都是通过grid-template-columns/rows或元素的grid-row属性明确指定的，自动行并未参与布局，所以该属性完全没起到约束作用。
2. 高度约束链断裂：.page设置了max-height:80%，但它的父元素（body、html）没有明确高度，导致百分比高度没有参考基准，.page会被内容撑开，无法限制在视口80%范围内。
3. 跨行列元素无高度限制：点击后.box.clicked跨3行显示，但其内部图片、文本没有高度约束，会按原始尺寸撑开容器；同时其他盒子通过grid-auto-flow: column横向排列，但容器整体高度未被限制，最终导致内容溢出视口。

核心调整点 #

• 给html和body设置100%高度，让.page的百分比高度有参考基准。
• 给.container设置height: 100%，绑定到.page的高度，确保网格容器高度被限制。
• 用grid-template-rows替代grid-auto-rows，明确指定网格行的高度比例，而非依赖自动行。
• 给图片添加max-height和object-fit，确保图片在网格单元格内自适应，不撑破容器。
• 调整点击后的网格行模板，让行高基于容器高度分配，同时限制.box.clicked的内部padding，避免额外高度占用。

修改后的完整代码 #

JavaScript

var $ = document.querySelector.bind(document);
var $$ = document.querySelectorAll.bind(document);
$('body').addEventListener('click', (event) => {
    $$('.container > div').forEach(element => element.classList.remove('clicked'));
    $('.container').classList.remove('clicked');
    if (event.target.tagName == "IMG") {
        event.target.closest('.container').classList.add('clicked');    
        event.target.closest('.box').classList.add('clicked');
    }
});

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.page { 
    max-width: 80%; 
    height: 80vh; /* 直接绑定视口高度，避免父元素高度依赖问题 */
    margin: 2rem auto; 
    border: 1px solid black;
    overflow: hidden; /* 阻止内部内容溢出容器 */
} 
.container { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr; /* 明确两行，各占容器50%高度 */
    gap: 0.5rem;
    height: 100%; /* 继承.page的高度 */
}
.container img { 
    max-width: 100%; 
    max-height: 100%;
    object-fit: contain; /* 图片自适应单元格大小，保持比例 */
}
.box { 
    background-color: gray;
    overflow: auto; /* 单元格内容过多时内部滚动，不撑破容器 */
    padding: 0.5rem;
}
.container.clicked { 
    grid-template-columns: 1fr 1fr 4fr; 
    grid-template-rows: 1fr 1fr 1fr; /* 明确三行，各占容器33.3%高度 */
}    
.box.clicked { 
    grid-column: 3 / 4; 
    grid-row: 1 / 4; 
    padding: 0.5rem; 
    background-color: yellow;
}
.container.clicked .box:not(.clicked) { 
    grid-auto-flow: column;
}

HTML

<div class="page">
    <div class="container">
        <div class="box">Hello world <img src='https://picsum.photos/id/237/200'></div>
        <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div class="box"><img src='https://picsum.photos/id/241/300'></div>
        <div class="box"><img src='https://picsum.photos/id/242/400'></div>
        <div class="box"><img src='https://picsum.photos/id/238/500'></div>
        <div class="box"><img src='https://picsum.photos/id/239/200'></div>
    </div>
</div>

修复效果说明 #

• 所有内容被限制在视口80%高度的.page容器内，不会溢出浏览器。
• 点击图片切换布局时，网格行高按比例分配，图片自适应单元格大小，文本过多时单元格内部滚动，整体无外部滚动条。
• 完整的高度约束链让网格布局的比例设置生效，彻底解决内容溢出问题。

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