0

Задача:

  • Горизонтальное поведение: как на картинке ниже; левая колонка занимает фиксированную ширину, остальные две делят по 50% оставшейся ширины, но имеют min-width.
  • Вертикальное поведение: колонки имеют одинаковую высоту, достигающую футера, а сам футер находится в нижней части экрана, когда высота окна больше высоты содержимого, или идёт сразу после контента, когда меньше (данная задача была решена в этом вопросе).

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

Для обеспечения требуемого горизонтального поведения лучше всего подходят свойства display:table;, display:table:cell;, с этими средствами сделать нужное горизонтальное поведение не составляет труда.

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

Получается прямо-таки конфликт между требованиями к горизонтальному и вертикальному поведению. Есть ли какие-нибудь средства, которые позволяют обеспечить оба поведения?

P. S. Хочу wrap-content и match-parent из XML-вёрстки под android...

Дух сообщества
  • 1
Боков Глеб
  • 1,116
  • 2
  • 25
  • 70

2 Answers2

1

Если я всё правильно понял, то вот решение. Футер к низу прижимается, колонки одинаковой высоты, одна из них фиксирована по ширине, остальные делят оставшееся пространство поровну.

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: black;
}
.container__columns {
  flex-grow: 1;
  display: flex;
  background: #5d8cf7;
}


.column1 {
  width: 50px;
  padding: 20px;
}


.column2 {
  flex-grow: 1;
  background: #f75d5d;
  padding: 20px;
}


.column3 {
  flex-grow: 1;
  background: #66f75d;
  padding: 20px;
}
.pagefooter {

  padding: 20px;
  background: #d85df7;
}
<div class="container">
  <div class="container__columns">
    <div class="column1">1</div>
    <div class="column2">2</div>
    <div class="column3">3</div>
  </div>
  <footer class="pagefooter">Footer</footer>
</div>
Sasha Omelchenko
  • 12,818
1

Вариант, если нужно использовать display: table-cell.

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  min-height: 100vh;
}


.pagefooter {
  height: 40px;
  background: #f75d88;
  padding: 5px;
}


.columns {
  display: table;
  table-layout: fixed;
  width: 100%;
}


.column1,
.column2,
.column3 {
  padding: 20px;
  display: table-cell;
  height: calc(100vh - 40px);
}


.column1 {
  width: 150px;
  background: #fff8a5;
}


.column2,
.column3 {
  width: calc(50% - 150px);
  background: #5db0f7;
}


.column3 {
  background: #5df7a2;
}
<div class="container">
  <div class="columns">
    <div class="column1">
      <p>1</p>
    </div>
    <div class="column2">
      2
    </div>
    <div class="column3">
      3
    </div>
  </div>
  <footer class="pagefooter">footer</footer>
</div>
Sasha Omelchenko
  • 12,818