tag - video html title




как установить высоту, чтобы избежать пробелов на больших экранах (2)

Я пытаюсь создать следующий макет:

Как установить высоту каждой плитки так, чтобы она масштабировалась на больших мониторах. Я попытался установить минимальную высоту в px и высоту в%. Но на больших мониторах, кажется, есть пустое пространство внизу.

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


CSS3 flexbox позволит вам сделать это довольно легко. Вот несколько ссылок, которые помогут вам начать работу: https://envato.com/blog/css3-flexbox/
Понимание CSS3 Flexbox

Кроме того, на эту тему есть МНОГИЕ другие веб-страницы. Google - ваш друг


Таким образом, это возможно с помощью flexbox вы можете видеть, что он отчетливо реагирует.

Я создал flexbox -высокий flexbox . Вы можете настроить height wrapper чтобы получить ее по своему усмотрению. См. Также этот ответ для другого примера, где делается то же самое.

Чтобы показать, как динамический контент ведет себя в этом макете, добавьте здесь текстовый контент с этим css:

.content{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

Проверьте это и дайте мне знать ваши отзывы об этом. Благодаря!

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  height: 100vh;
}
.wrapper > div:last-child {
  width: 50%;
  border: 1px solid;
}
.wrapper > div:first-child {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}
.wrapper > div:first-child > div:last-child {
  width: 100%;
  height: 50%;
  border: 1px solid;
}
.wrapper > div:first-child > div:first-child {
  height: 50%;
  display: flex;
}
.wrapper > div:first-child > div:first-child > div {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wrapper > div:first-child > div:first-child > div:last-child {
  border: 1px solid;
}
.wrapper > div:first-child > div:first-child > div:first-child > div {
  height: 50%;
  border: 1px solid;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
@media only screen and (max-width: 650px) {
  .wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .wrapper > div:first-child,
  .wrapper > div:last-child {
    width: 100%;
  }
  .wrapper > div:first-child > div:first-child {
    width: 100%;
    flex-direction: column;
  }
  .wrapper > div:first-child > div:first-child > div {
    width: 100%;
  }
}
<div class="wrapper">
  <div>
    <div>
      <div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
        </div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
        </div>
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
        sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
      </div>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </div>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
    sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div>
</div>





flexbox