从列中删除的文本-HTML&；CSS

我在一页上有三列。它们都有文本，但数量不同。我的列背景色只覆盖文本之前的列，而不是整个页面。我希望背景色显示从文本开始到页面底部，正好在页脚上方。我试着玩弄我的填充和边距，但我很难修复它。我无法插入图片，因为我刚刚创建了我的帐户，但要为您绘制图片，列并排但高度不同，它们没有对齐。有人能帮我一下吗，这是我的密码：

谢谢

/* Create three equal columns that floats next to each other */
.column {
  align-content: center;
  float: left;
  width: 33.33%;
  height: auto;
  background-color: lightgray;
}


/*Headings in columns*/
h2 {
  text-align: center;
  font-family: sans-serif;
  font-size: 25px;
  color: darkslateblue;
  margin: 10px;
}


/*All text in columns*/
#columntext {
  padding: 1px;
  margin: 10px;
  text-align: justify-all;
  font-family: sans-serif;
  font-size: 16px;
  color: darkslateblue;
}


/*Centers all columns with margin*/
#allcolumns {
  align-content: center;
  margin: 20px;
}

---

我不完全确定你在问什么-如果可能的话，我建议包括你的HTML

如果您使用的是一个id，那么它应该只应用于页面上的一个项目，我假设#columntext用于每个columntext实例？在这种情况下，将其设为类，与#allcolumns相同

您提到它们每个都向左浮动，高度不同，这三个单独的整张表是否只有一列？如果您希望它们都具有相同的高度，只需将它们放在一张桌子内即可：

<table>
  <tr>
    <th><h2>Lorem ipsum</h2></th>
    <th><h2>Lorem ipsum</h2></th>
    <th><h2>Lorem ipsum</h2></th>
  </tr>
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent 
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent 
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent 
    </td>
  </tr>
</table>

乱数假文
乱数假文
乱数假文
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数nec odio。自由女神。这是一个直径较大的曲线。塞德·尼西。nibh elementum的Nullaquis sem。同侧矢状肌。普拉森特·莫里斯。他告诉我们，这是奥古斯特·森佩尔·波尔塔。毛里斯·马萨。前庭短弧。类适用于taciti Sociasqu和litora Tournt
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数nec odio。自由女神。这是一个直径较大的曲线。塞德·尼西。nibh elementum的Nullaquis sem。同侧矢状肌。普拉森特·莫里斯。他告诉我们，这是奥古斯特·森佩尔·波尔塔。毛里斯·马萨。前庭短弧。类适用于taciti Sociasqu和litora Tournt
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数nec odio。自由女神。这是一个直径较大的曲线。塞德·尼西。nibh elementum的Nullaquis sem。同侧矢状肌。普拉森特·莫里斯。他告诉我们，这是奥古斯特·森佩尔·波尔塔。毛里斯·马萨。前庭短弧。类适用于taciti Sociasqu和litora Tournt

如果包含HTML，则更容易看到您正在尝试执行的操作

---

另外，如果这是一个选项，我建议使用上述浮动，因为浮动正在逐步淘汰

向列中添加行div或父div，并添加类似CSS的.row{display:flex；flex wrap:wrap}并删除float:left from.column类忘记flexbox，我添加了display:flex；柔性包装：包装；它解决了这个问题，谢谢@VevG@Deepak！