使用Flexbox实现4个均等象限页面时出现滚动条与底部空白问题

我要展示4个带图片的均等象限，每个象限包含一个占主div宽度20%的侧边栏。但页面出现了滚动条，底部还有一小段空白，用开发者工具检查后确认空白不是padding或margin导致的。

现有代码 #

CSS 代码 #

body {
    padding: 0;
    margin: 0;
    height: 100vh;
}

.slide {
    display: flex;
    flex-wrap: wrap;
}

.group {
    display: flex;
    width: 50%;
    /* outline: solid 3px #fff; */
}

.side {
    width: 20%;
    background-color: red;
}

.main {
    background-color: blue;
}

img {
    width: 100%;
    height: 100%;
}

HTML 代码 #

<!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">
    <title>Display</title>
</head>

<body>
    <div class="slide">
        <div class="group">
            <div class="main"><img src="https://dummyimage.com/3840x2160/000/fff"></div>
            <div class="side"></div>
        </div>
        <div class="group">
            <div class="main"><img src="https://dummyimage.com/3840x2160/000/fff"></div>
            <div class="side"></div>
        </div>
        <div class="group">
            <div class="main"><img src="https://dummyimage.com/3840x2160/000/fff"></div>
            <div class="side"></div>
        </div>
        <div class="group">
            <div class="main"><img src="https://dummyimage.com/3840x2160/000/fff"></div>
            <div class="side"></div>
        </div>
    </div>
</body>

</html>

问题原因 #

1. 图片基线对齐导致底部空白：图片属于行内替换元素，默认垂直对齐方式是baseline，这会在图片底部预留出一小段空间（用于显示字母的下伸部分，比如g、y），这就是你看到的底部空白。
2. 高度溢出触发滚动条：body设置了height:100vh，但.slide和内部的.group没有限制高度，图片按比例缩放后，整体高度超过了视口高度，从而出现滚动条。另外，.main没有设置宽度分配，也可能导致布局宽度超出预期。

修复方案 #

1. 消除底部空白 #

两种方法任选其一：

• 将图片转为块级元素，彻底消除行内元素的基线空白：

img {
    width: 100%;
    height: 100%;
    display: block; /* 添加此行 */
}

• 改变图片的垂直对齐方式：

img {
    width: 100%;
    height: 100%;
    vertical-align: bottom; /* 添加此行 */
}

2. 解决滚动条问题 #

调整布局高度和宽度分配：

.slide {
    display: flex;
    flex-wrap: wrap;
    height: 100vh; /* 让容器高度与视口一致 */
}

.group {
    display: flex;
    width: 50%;
    height: 50vh; /* 每个象限占视口高度的50%，两行正好填满 */
}

.main {
    background-color: blue;
    flex: 1; /* 让主区域占据侧边栏以外的剩余宽度（80%） */
}

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