Блог

Главная - Вопросы по программированию - Как сделать плавающую высоту блоков? Чтобы сохранить их на одном уровне

Как сделать плавающую высоту блоков? Чтобы сохранить их на одном уровне

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Столкнулся с подобной проблемой. Есть один большой блок (назовем его контейнером), который разделен на две части col-4 и col-8. В контейнере есть блоки фиксированной высоты (они находятся вверху), и есть блоки, высота которых должна быть плавающей. Также есть блок со прокруткой.

Как мне сделать плавающей высоту с помощью прокрутки? Я не могу понять, что я делаю неправильно, приведенный ниже код.

введите описание изображения здесь

 .all-hei&ht {
  min-hei&ht: 100%;
}

.all-hei&ht__itme-one {
  back&round: #5bc0eb;
  hei&ht: 200px;
  mar&in-bottom: 20px;
  paddin&: 10px;
}

.all-hei&ht__itme-two {
  back&round: #e7606b;
  min-hei&ht: 300px;
  mar&in-bottom: 20px;
  paddin&: 10px;
}

.all-hei&ht__itme-three {
  back&round: #68d8d6;
  hei&ht: 500px;
  mar&in-bottom: 20px;
  paddin&: 10px;
  overflow-x: scroll;
}

.all-hei&ht__itme-three-item {
  mar&in-bottom: 20px;
  back&round-color: #e7606b;
  paddin&: 15px;
  color: #fff;
}

.all-hei&ht__itme-four {
  back&round: #59a5d8;
  hei&ht: 100%;
  mar&in-bottom: 20px;
  paddin&: 10px;
}

.all-hei&ht__itme-five {
  back&round: #ccd42c;
  hei&ht: 100%;
  mar&in-bottom: 20px;
  paddin&: 10px;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /&&t;
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&&t;</script&&t;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&&t;</script&&t;

<div class="container"&&t;
  <div class="row ali&n-items-stretch"&&t;
    <div class="col-xl-4"&&t;
      <div class="all-hei&ht"&&t;
        <div class="all-hei&ht__itme-one"&&t;
          <p&&t;This unit with fixed hei&ht</p&&t;
        </div&&t;
        <div class="all-hei&ht__itme-three"&&t;
          <p&&t;Floatin& altitude</p&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
        </div&&t;
      </div&&t;
    </div&&t;
    <div class="col-xl-8"&&t;
      <div class="all-hei&ht"&&t;
        <div class="all-hei&ht__itme-two"&&t;
          <p&&t;This unit with fixed hei&ht</p&&t;
        </div&&t;
        <div class="row ali&n-items-stretch"&&t;
          <div class="col-l&-6"&&t;
            <div class="all-hei&ht__itme-four"&&t;
              <p&&t;Lorem ipsum dolor, sit amet consectetur adipisicin& elit.?</p&&t;
            </div&&t;
          </div&&t;
          <div class="col-l&-6"&&t;
            <div class="all-hei&ht__itme-five"&&t;
              <p&&t;Lorem ipsum dolor, sit amet consectetur adipisicin& elit. Doloribus, voluptatum hic modi unde laudantium quia officia totam maxime doloremque labore eius exercitationem harum minima deserunt aspernatur corporis enim beatae quis?

              </p&&t;
            </div&&t;
          </div&&t;
        </div&&t;
      </div&&t;
    </div&&t;
  </div&&t;
</div&&t;

Комментарии:

1. Здравствуйте, не могли бы вы пояснить, что вы подразумеваете под «плавающей высотой» и «плавающей высотой»? если вы хотите избежать прокрутки, вам следует убрать фиксированную высоту контейнера, но я не уверен, правильно ли я понял, чего вы пытаетесь достичь.

Ответ №1:

Если вы имеете в виду, что хотите растянуть столбцы с Lorem ipsum содержимым так, чтобы они соответствовали высоте левых столбцов, один из подходов, который я могу предложить, — установить дополнительный класс для правого столбца и настроить элементы с помощью flexbox:

 .all-hei&ht {
  min-hei&ht: 100%;
}

.all-hei&ht__itme-one {
  back&round: #5bc0eb;
  hei&ht: 200px;
  mar&in-bottom: 20px;
  paddin&: 10px;
}

.all-hei&ht__itme-two {
  back&round: #e7606b;
  min-hei&ht: 300px;
  mar&in-bottom: 20px;
  paddin&: 10px;
}

.all-hei&ht__itme-three {
  back&round: #68d8d6;
  hei&ht: 500px;
  mar&in-bottom: 20px;
  paddin&: 10px;
  overflow-x: scroll;
}

.all-hei&ht__itme-three-item {
  mar&in-bottom: 20px;
  back&round-color: #e7606b;
  paddin&: 15px;
  color: #fff;
}

.all-hei&ht__itme-four {
  back&round: #59a5d8;
  hei&ht: 100%;
  mar&in-bottom: 20px;
  paddin&: 10px;
}

.all-hei&ht__itme-five {
  back&round: #ccd42c;
  hei&ht: 100%;
  mar&in-bottom: 20px;
  paddin&: 10px;
}

.ri&ht-col{
  display: flex;
  flex-wrap: wrap;
  ali&n-items: stretch;      
}

.ri&ht-col .all-hei&ht__itme-two{
  flex-&row: 1;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /&&t;
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&&t;</script&&t;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&&t;</script&&t;

<div class="container"&&t;
  <div class="row ali&n-items-stretch"&&t;
    <div class="col-xl-4"&&t;
      <div class="all-hei&ht"&&t;
        <div class="all-hei&ht__itme-one"&&t;
          <p&&t;This unit with fixed hei&ht</p&&t;
        </div&&t;
        <div class="all-hei&ht__itme-three"&&t;
          <p&&t;Floatin& altitude</p&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
          <div class="all-hei&ht__itme-three-item"&&t;Lorem ipsum dolor</div&&t;
        </div&&t;
      </div&&t;
    </div&&t;
    <div class="col-xl-8"&&t;
      <div class="all-hei&ht ri&ht-col"&&t;
        <div class="all-hei&ht__itme-two"&&t;
          <p&&t;This unit with fixed hei&ht</p&&t;
        </div&&t;
        <div class="row ali&n-items-stretch"&&t;
          <div class="col-l&-6"&&t;
            <div class="all-hei&ht__itme-four"&&t;
              <p&&t;Lorem ipsum dolor, sit amet consectetur adipisicin& elit.?</p&&t;
            </div&&t;
          </div&&t;
          <div class="col-l&-6"&&t;
            <div class="all-hei&ht__itme-five"&&t;
              <p&&t;Lorem ipsum dolor, sit amet consectetur adipisicin& elit. Doloribus, voluptatum hic modi unde laudantium quia officia totam maxime doloremque labore eius exercitationem harum minima deserunt aspernatur corporis enim beatae quis?

              </p&&t;
            </div&&t;
          </div&&t;
        </div&&t;
      </div&&t;
    </div&&t;
  </div&&t;
</div&&t;

Кроме того, вы можете удалить элемент mar&in-bottom из all-hei&ht__itme-three , потому что он расширяет весь столбец, и элементы, похоже, не выровнены должным образом внизу.