Растянуть элемент на всю длину экрана Bootstrap 4

Question

Как растянуть выделенный красным элемент «col» на всю длину экрана?

Я пробовал это:

class="... w-100"

и это:

<div class="..." style="height:100vh;">

Мой элемент col выглядит так:

<div class="col-12 col-lg-3 col-xl-2 px-lg-0 border-right-lg border-gray-300 bg-dark text-white w-100" style="height:100vh;">
  [...]
</div>

Answer 1

Если вы хотите, чтобы ваш div имел высоту, равную высоте окна просмотра, поместите на него vh-100 класс. Или примените к нему min-height: 100vh.

Если вы хотите, чтобы он занимал всю ширину экрана, используйте эту разметку: .container-fluid > .row > .col.

Вот макет, который всегда будет pu sh в нижнюю часть экрана (как на картинке):

/* test */

.left-col {
  background: indigo;
}
.footer {
  /* this is not needed it if you want content to set its size
   * but mine is empty
   */
  min-height: 150px;
  border: 1px solid red;
}
.full-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.full-layout .row {
  flex-grow: 1;
}
.full-layout .row:last-child {
  flex-grow: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container-fluid full-layout">
  <div class="row">
    <div class="col-sm-3 left-col"></div>
  </div>
  <div class="row">
    <div class="col vw-100 footer"></div>
  </div>
</div>

Answer 2

Предполагая, что под «всей длиной» вы подразумеваете «всю высоту области просмотра»:

Вероятно, у вас есть два ограничения на минимальную высоту первого столбца:

• как минимум пока высота просмотра
• до тех пор, пока самый длинный столбец в строке

Для первого, min-height: 100vh позаботится об этом, если это поддерживается браузером. Просто height: 100vh не работает, потому что это препятствует работе второго ограничения.

Для второго, поскольку (более новые) bootsrap row s - это гибкая коробка, он позаботится об этом за вас.

В качестве альтернативы вы можете указать минимальную высоту строки, что может иметь больше смысла, или контейнера (при добавлении гибкого макета столбца).

.sidebar {
  background-color: blue;
  /* If this was a "fixed" hieght, then it wouldn't expand to the whole length of the content (which flex does for you) */
  min-height: 100vh;
}

.content {
  background-color: skyblue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="sidebar col">some sidebar content</div>
    <div class="content col">
    Spicy jalapeno bacon ipsum dolor amet tail t-bone meatloaf ribeye chislic chuck meatball pork belly short loin beef shank hamburger ham. <details>Kielbasa alcatra pork belly sirloin, andouille ribeye leberkas ham hock bacon pig tenderloin jerky chicken hamburger meatloaf. Tongue beef ribs shankle fatback swine jerky tail, biltong andouille doner leberkas rump bresaola chicken. Salami bacon frankfurter, brisket ribeye capicola porchetta corned beef strip steak. Turducken burgdoggen salami sirloin, pork kielbasa fatback chislic short ribs porchetta meatball pastrami doner. Ball tip shank jowl tail, short loin shankle chislic. Cow pork loin meatloaf short loin sirloin flank biltong tri-tip filet mignon pork belly brisket rump sausage ground round kevin.

Short loin shankle salami, t-bone andouille buffalo burgdoggen landjaeger swine alcatra sirloin tongue ribeye tenderloin. Shankle ham strip steak, jerky swine bresaola bacon. Tri-tip beef ribs frankfurter, burgdoggen spare ribs picanha porchetta ground round bresaola swine cupim kevin shank. Boudin picanha kielbasa filet mignon beef ribs, sausage prosciutto bacon short loin flank jerky.
     </details>
    </div>
  </div>
</div>

Если вместо этого вы имели в виду, что вам нужен элемент стиля «нижний колонтитул», просто создайте другую строку только с одним столбцом. Ничего особенного не требуется.