Макет с 2 столбцами и 2 строками

У меня есть .контейнер с 2 столбцами и во втором столбце .правильно я хочу иметь 2 строки но первая строка .содержание должна использовать оставшееся пространство

это разметка HTML

<div class = "container">
    <div class = "left">left</div>
    <div class = "right">
        <div class = "content">content</div>
        <div class = "footer">footer</div>
    </div>
</div>

это CSS

.container {
    display: flex;
    flex-direction: row;
    height: 400px; /* the remaining space  in the screen will be nice */
}

.left {
    width: 300px;
}

.right {
    flex-grow: 1;
}

.content {
    align-self: stretch; /* this is not doing anything*/
}

.footer {

}

и вот как это должно выглядеть

+--------+----------------------+
|        |                      |
|        |                      |
|        |       content        |
|  left  |                      |
|        |                      |
|        +----------------------+
|        |       footer         |
+--------+----------------------+

html css flexbox

31.05.2019 03:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете использовать флексбокс полной высоты container:

вставьте флексбокс столбца внутри для элемента right,
используйте flex-grow: 1 на content, чтобы занять оставшееся место.

См. демо ниже:

body {
  margin: 0;
}
.container {
  display: flex;
  /* flex-direction: row; <-- omit this, its default */
  height: 100vh; /* full height */
}

.left {
  width: 300px;
  border: 1px solid;
}

.right {
  flex-grow: 1; /* occupy remaining space */
  display: flex;
  flex-direction: column; /* column flexbox */
  border: 1px solid;
}

.content {
  flex-grow: 1; /* occupy remaining space */
  border-bottom: 1px solid;
}

<div class = "container">
  <div class = "left">left</div>
  <div class = "right">
    <div class = "content">content</div>
    <div class = "footer">footer</div>
  </div>
</div>

31.05.2019 03:35

Рабочий пример

.container {
    display: flex;
    flex-direction: row;
    height: 100VH;
}

.left {
    width: 200px;
    border: 1px solid;
}

.right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content {
    border: 1px solid #333;
    border-bottom: 0;
    flex-grow: 1;

}

.footer {
    border: 2px solid;
    height: 100px;
}

Думаю, что min-height:100vh будет лучше

— 31.05.2019 06:18

31.05.2019 05:58

Flexbox отлично работает здесь, но я хотел бы отметить, что это также идеальная ситуация для CSS Grid. С сеткой вы можете избавиться от лишнего контейнера div.right.

<div class = "container">
    <div class = "left">left</div>
    <div class = "content">content</div>
    <div class = "footer">footer</div>
</div>



.container {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 1fr 100px; /* change the 100px to your desired height of the footer*/
    grid-template-areas: 
      'left content'
      'left footer';
    height: 400px; /* height OP selected */
}

.left {
  grid-area: left;
}

.content {
  grid-area: content;
}

.footer {
 grid-area: footer;
}

А КодПен просто для удовольствия.

31.05.2019 06:44