Текст из обрезанного столбца - HTML & CSS

Question

У меня есть 3 столбца на странице. Все они имеют текст, но не одинаковое количество. Мой фоновый цвет для столбцов охватывает только столбцы вплоть до текста, а не весь путь до страницы. Я хочу, чтобы цвет фона отображался там, где текст начинается в нижней части страницы и останавливается чуть выше моего нижнего колонтитула. Я попытался поиграть с моим отступом и полем, но у меня проблемы с его исправлением. Я не могу вставить изображение, так как я только что создал свой аккаунт, но чтобы нарисовать для вас картинку, столбцы расположены рядом, но разной высоты, они не выровнены. Может кто-нибудь, пожалуйста, помогите мне, вот мой код:

Спасибо!

/* 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;
}

Answer 1

Я не совсем уверен, что вы спрашиваете - я бы порекомендовал включить ваш HTML, если это возможно?

Если вы используете идентификатор, он должен применяться только к одному элементу на странице Я предполагаю, что #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>

Если вы включите HTML, вам будет гораздо легче увидеть, что вы пытаетесь do

PS Я бы рекомендовал использовать flexbox над поплавками, если это опция, поскольку поплавки постепенно сокращаются!