veydlin
@veydlin
Мне никогда не жалко средств на свое любопытство

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

https://jsfiddle.net/9z8u92dh/
Как можно растянуть aside и main по высоте экрана?
Проблема в том, что над контентом есть шапка и она мешает нормальной работе height: 100%
<header></header>
<div class="middle">
    <aside>Блоки</aside>
    <main>Контент</main>
 </div>


html, body {
	height: 100%;
  margin: 0;
}

header {
  background-color: #000;
  height: 50px;
}

.middle {
  background-color: #fff;
  width: 500px;
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* overflow: hidden нужен, по этому нельзя ставить display: table */
}

aside {
  background-color: #ff00ff;
  width: 100px;
   display: table-cell;
   vertical-align: top;
}

main {
  background-color: #00ffff;
  width: 400px;
   display: table-cell;
   vertical-align: top;
}
  • Вопрос задан
  • 1277 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
min-height: calc(100vh - 100px);
Ответ написан
evgeniy8705
@evgeniy8705
Повелитель вселенной
Пригласить эксперта
Ответы на вопрос 3
LenovoId
@LenovoId
I want, women not to get sick
calc (); работает везде : https://jsfiddle.net/Geyan/9z8u92dh/4/ , проверил с 4 устройств
Ответ написан
Комментировать
AppFA
@AppFA
Frontend developer at Yandex
Можно сделать с помощью flex-box так:
https://jsfiddle.net/9z8u92dh/3/
Ответ написан
Комментировать
vilka_2009
@vilka_2009
Верстаю
Все гораздо проще. Если флексы не подходят из-за поддержки каких-нибудь старых браузеров, то вот так: https://jsfiddle.net/9z8u92dh/5/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы