Как растятнуть блок на высоту родителя?

Question

yapaofficial @yapaofficial

HTML
CSS

Как растятнуть блок на высоту родителя?

как черный блок растянуть на всю оставшуюся высоту?

Вопрос задан более трёх лет назад
246 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик + ИИ

9 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Решения вопроса 1

4 комментария

yapaofficial @yapaofficial Автор вопроса

не работает (

Написано более трёх лет назад
Daniel~ @daniel_pr

yapaofficial, какие у вас стили на данный момент?

Написано более трёх лет назад

yapaofficial @yapaofficial Автор вопроса

Daniel,

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="font/font.css">
	<link rel="stylesheet" type="text/css" href="style/style.css">
	<title>Алёна</title>
</head>
<body>

<section class="top">
	<div class="top__menu">
		<div class="top_menu-items">
			<div class="menu-item">Главная</div>
			<div class="menu-item">Обо мне</div>
			<div class="menu-item">Портфолио</div>
			<div class="menu-item">Услуги</div>
			<div class="menu-item">Отзывы</div>
			<div class="menu-item">Контакты</div>
		</div>

		<div class="top__menu-social">
			<a class="top_social-item">
				
			</a>
			<a class="top_social-item">
				
			</a>
		</div>
	</div>

	<div class="top__main">
		<div class="top_main-bg">
			<img src="img/top-bg.png">
		</div>

		<div class="top_main-description">
			Создаю эффективный инструмент<br>
			продаж - удобные и понятные сайты
		</div>

		<div class="top__footer">
			sdf
		</div>
	</div>
</section>

</body>
</html>

html, body{
	font-family: sans-serif;
	margin: 0;
	height: 100%
}

*{
	box-sizing: border-box;
}

a{
	text-decoration: none;
}

.top{
	width: 100%;
	min-height: 100vh;
	background: #FFBEA1;
}

.top__menu{
	width: 100%;
	min-height: 80px;
	display: flex;
	padding: 20px;
	justify-content: center;
}

.top__menu-social{
	display: flex;
    align-items: center;
    justify-content: center;
}

.top_social-item{
	max-width: 48px;
	width: 100%;
	background: #000;
}

.top_menu-items{
    display: flex;
    align-items: center;
}

.menu-item{
	padding: 0 18px;
	cursor: pointer;
}

.menu-item:hover{
	text-decoration: underline;
}

.top__main{
	position: relative;
}

.top_main-bg{
	padding: 90px 70px;
}

.top_main-bg img{
	max-width: 100%;
	width: 100%;
}

.top_main-description{
	position: absolute;
	right: 60px;
	bottom: 30px;
	font-family: 'TT Norms';
	font-style: normal;
	font-weight: 300;
	font-size: 1.2rem;
	line-height: 124.9%;
}

.top__footer{
    display: flex;
    background: #000;
    align-items: stretch;
    flex-direction: row;
}

Написано более трёх лет назад

Daniel~ @daniel_pr

.top {
  display: flex;
  flex-direction: column;
}

.top__main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.top__footer {
  flex-grow: 1;
}

Написано более трёх лет назад

Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.

Похожие вопросы

CSS

Сложный
Как добиться такого же фона ( как у свг)?
- 1 подписчик
- 15 июл.
- 150 просмотров
1

ответ
HTML

+2 ещё

Простой
Как запретить формирования ссылок вида /tel:?
- 2 подписчика
- 01 июл.
- 296 просмотров
3

ответа
HTML

+1 ещё

Средний
Как выставить элементу ширину по содержимому при переносах?
- 1 подписчик
- 30 июн.
- 171 просмотр
1

ответ
HTML

+3 ещё

Средний
Как создать каркас верстки который будет считаться по высоте, а не по ширине?
- 4 подписчика
- 26 июн.
- 395 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 202 просмотра
1

ответ
HTML

+1 ещё

Простой
Как оформить так карточку типа бенто стиль?
- 1 подписчик
- 13 июн.
- 243 просмотра
3

ответа
CSS

Простой
Как убрать «треугольник» от скролла?
- 1 подписчик
- 12 июн.
- 201 просмотр
1

ответ
CSS

Простой
Как сделать background изображение темнее и более размытым, как в дизайне?
- 1 подписчик
- 29 мая
- 171 просмотр
1

ответ
CSS

+1 ещё

Простой
Как создать вторую рамку за изображением, смещенную влево и вниз?
- 2 подписчика
- 26 мая
- 256 просмотров
4

ответа
CSS

Простой
Почему @media запрос не работает?
- нет подписчиков
- 22 мая
- 150 просмотров
1

ответ
Показать ещё Загружается…

Вот аналогичный вопрос несколько часов назад.
https://qna.habr.com/q/1222390

как черный блок растянуть на всю оставшуюся высоту?

Может, это просто фон?

Answer 1 · 2022-11-17 20:11:31

Через flexbox это отлично делается

<div class="parent">
  <div class="block-1"></div>
  <div class="block-2"></div>
</div>

.parent {
  display: flex;
  flex-direction: column;
}

.block-2 {
  flex-grow: 1;
}

flex-grow: 1 говорит флекс-элементу занять все оставшееся место

Как растятнуть блок на высоту родителя?

Вопрос закрыт для ответов и комментариев

Минуточку внимания

Войдите на сайт