CSS设置column1背景色无法填充整列 仅部分显示灰色如何解决

问题原因 #

你遇到的问题是两个CSS写法错误导致的：

• .column1 类的height属性值仅写了100，没有加单位，属于无效属性，浏览器会直接忽略该规则，列的高度只会跟随内部内容高度撑开，内容长度不够就只会显示部分灰色背景
• 浮动布局未做清除浮动处理，父容器.row会出现高度坍塌，也会影响列高度的计算

修复方案 #

你可以按以下步骤调整CSS代码：

1. 优先推荐使用vh视口单位来设置列的最小高度，不需要额外给所有父级元素设置高度，修改.column1的样式：

.column1
{
    float: left;
    width: 19%;
    min-height: 100vh; /* 替换原来的height:100，100vh代表和浏览器视口高度一致 */
    margin-right: 1%;
    background-color: #333;
    clear: both;
}

2. 给父容器.row添加清除浮动样式，避免高度坍塌：

.row::after {
    content: "";
    display: table;
    clear: both;
}

如果你需要让列高度和右侧.column2的高度保持一致，也可以改用flex布局替代浮动布局，写法更简单也不会有高度坍塌问题：

/* 删掉.row、.column1、.column2原来的float相关属性，替换为如下flex布局代码 */
.row {
    display: flex;
    width: 100%;
}
.column1
{
    width: 19%;
    margin-right: 1%;
    background-color: #333;
}
.column2
{
    width: 80%;
    background-color: white;
}

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