Заставить элемент внутри столбцов оставаться внизу

Question

У меня есть следующие 2 столбца начальной загрузки (каждый из них имеет описание продукта и информацию о цене):

<div class="row">
    <div class="col-md-4">
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <ul>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
            </ul>
            <table class="table table-sm table-bordered price-table">
                <tbody>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr class="table-success">
                        <td>info</td>
                        <td>info</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <p>
                    Lorem.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <ul>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
            </ul>
            <table class="table table-sm table-bordered price-table">
                <tbody>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr class="table-success">
                        <td>info</td>
                        <td>info</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <p>
                    Lorem.
                </p>
            </div>
        </div>
    </div>
</div>

Как мы видим, элементы ul имеют различное количество элементов и, следовательно, имеютразной высоты, что очень раздражает.Чего я хочу добиться:

• Я хочу, чтобы столбцы имели одинаковую высоту.
• Я хочу, чтобы элемент table всегда оставался внизу столбца, илиul должен заполнить все 100% свободной области.

Как я могу это сделать?Заранее большое спасибо.

Answer 1

.row .col-md-4 {
  display: flex;
}
.row .col-md-4 > div {
  display: flex;
  flex-direction: column;
}
.row .col-md-4 > div > table {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-4">
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <ul>
        <li>
          text
        </li>
        <li>
          text
        </li>
      </ul>
      <table class="table table-sm table-bordered price-table">
        <tbody>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr class="table-success">
            <td>info</td>
            <td>info</td>
          </tr>
        </tbody>
      </table>
      <div>
        <p>
          Lorem.
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <ul>
        <li>
          text
        </li>
        <li>
          text
        </li>
        <li>
          text
        </li>
        <li>
          text
        </li>
      </ul>
      <table class="table table-sm table-bordered price-table">
        <tbody>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr class="table-success">
            <td>info</td>
            <td>info</td>
          </tr>
        </tbody>
      </table>
      <div>
        <p>
          Lorem.
        </p>
      </div>
    </div>
  </div>
</div>

Answer 2

Вы можете добавить класс mb-auto к ul.Это подтолкнет весь контент под ним вниз.Чтобы это работало, родительский контейнер должен быть гибким.У вас есть дополнительный div внутри столбцов.добавьте классы гибких колонок d-flex к этому div.Кроме того, вы можете удалить избыточный div и добавить классы в столбец div.

<div class="row">
    <div class="col-md-4">
        <div class="d-flex flex-column h-100">
           ...
        <ul class="mb-auto">

Я сделал кодовую ручку с редактированием demo

: при стилизацииВнутренний div, ему требуется h-100, чтобы получить полную высоту, чтобы все столбцы оставались на одной высоте.

Answer 3

Простое решение - добавить высоту к вашему ul.

ul {
height: 100vh;
}

Но вы также должны добавить строки в оба col-4.