Задать вопрос
@marsep
html

Как можно растянуть блоки (div) по всей доступной высоте, учитывая имеющиеся блоки с фиксированной высотой?

Всем добрый день! Хотелось бы обратится за помощью в плане верстки. Имеется следующий каркас страницы:

<div id="sidebar"></div>
<div id="page"></div>
<div id="sidebar"></div>


#topbar {
width: 100%;
height: 100px;
}
#page{}
#sidebar {}


- Верхняя часть страницы: растягивается по всей ширине и имеет фиксированную высоту (например, 100 пикселей)
Остальное, а это #page и #sidebar должны растягиваться по доступной высоте, т.е. учитывая те 100 пикселей, что принадлежат блоку, который находится над этими двумя. Как такое можно реализовать средствами html и css без использования js? Заранее спасибо!

Т.е., если высота страницы 1000 пикселей и высота верхнего блока 100 пикселей, то эти блоки должны иметь высоту 900 пикселей.
  • Вопрос задан
  • 4804 просмотра
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 1
@Yadalay
Php, Mysql, Html, Css, Js/Jquery/Ajax, Laravel
Здравствуйте!
Я тут попробовал сделать то, что Вам надо. Вот, посмотрите - codepen.io/anon/pen/RNoXEN
Скажите, верно ли я понял?
P.S. Цвета и текст сделал для визуального представления.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 4
@bioforge
Верстающий пыхер
Как вариант jsfiddle.net/rur62hxv .
Если не нужен ie9, то можно поиграть с flexbox.
Ответ написан
1 комментарий
1 комментарий
keksmen
@keksmen
Just a programmer
Вот, пожалуйста.
codepen.io/anon/pen/KwawgN
Ответ написан
1 комментарий
1 комментарий
reskwer
@reskwer
front-end developer
Из предложенных ответов НЕ не 1 по теме, по этому даю свое решение.
codepen.io/reskwer/pen/jEyqzp
Код исходников
index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="reskwer">
	<title>Что-то на CodePen</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="content">
		<div id="topbar">Высота 100px</div>
		<div id="page">Высота 50% от 100%-100px</div>
		<div id="sidebar">Высота 50% от 100%-100px</div>
	</div>
</body>
</html>

style.css
html,body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
}
.content{
	width: 100%;
	height: 100%;
	position: relative;
}
#topbar {
	width: 100%;
	height: 100px;
	background: #eee;
	z-index: 3;
	position: absolute;
	top: 0;
	box-sizing: border-box;
	padding-top: 21px;
	font-size: 200%;
}
#page{
	width: 100%;
	height: 50%;
	background: #aaa;
	margin-top: -50px;
	z-index: 2;
	position: absolute;
	top: 100px;
	box-sizing: border-box;
	padding-top: 11%;;
	font-size: 200%;
}
#sidebar {
	width: 100%;
	height: 50%;
	background: #666;
	z-index: 1;
	position: absolute;
	bottom: 0;
	box-sizing: border-box;
	padding-top: 11%;
	font-size: 200%;
}

Автор, не забывай ставить отметку, Решение найдено..
Ответ написан
2 комментария
2 комментария
@denricher
Frontend developer
Изменил немного код от Артур pro
Так вернее будет: codepen.io/dennyjuice/pen/KwagNN

<body>
  <div class="content">
    <div id="topbar">Высота 100px</div>
    <div id="page">Высота 100% от 100%-100px</div>
    <div id="sidebar">Высота 100% от 100%-100px</div>
  </div>
</body>


html,body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}
.content{
  width: 100%;
  height: 100%;
  position: relative;
}
#topbar {
  width: 100%;
  height: 100px;
  background: #eee;
  z-index: 3;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  padding-top: 21px;
  font-size: 200%;
}
#sidebar{
  width: 200px;
  height: 100%;
  background: #aaa;
  z-index: 2;
  position: absolute;
  box-sizing: border-box;
  padding-top: 100px;
  font-size: 200%;
}
#page {
  width: 100%;
  height: 100%;
  background: #666;
  z-index: 1;
  position: absolute;
  box-sizing: border-box;
  padding-top: 100px;
  padding-left:200px;
  font-size: 200%;
}
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Очень срочно нужно помочь запустить программу с UI
26 апр. 2024, в 00:13
1000 руб./за проект
Создание бота/скрипта для сайта забронирование мест
26 апр. 2024, в 00:10
30000 руб./за проект
Ещё заказы