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

Question

yapaofficial @yapaofficial

HTML
CSS

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

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

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

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

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

Решения вопроса 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;
}

Написано более двух лет назад

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

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

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

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

HTML

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- 3 часа назад
- 45 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 6 часов назад
- 55 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 184 просмотра
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 108 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 108 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 108 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 79 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 59 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 101 просмотр
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Создать мини-приложение календарь в ВК

25 нояб. 2024, в 22:44

3000 руб./за проект

Разметить медицинские изображения для лаборатории LabelHub

25 нояб. 2024, в 22:13

450 руб./в час

Разметить данные для машинного обучения и задач компьютерного зрения

25 нояб. 2024, в 22:05

400 руб./в час

Вот аналогичный вопрос несколько часов назад.
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 говорит флекс-элементу занять все оставшееся место

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

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

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

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