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

Question

yapaofficial @yapaofficial

HTML
CSS

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

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

Вопрос задан более года назад
140 просмотров

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;
}

Написано более года назад

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

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

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

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

CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- час назад
- 8 просмотров
0

ответов
HTML

Простой
Как найти профиль на Авито?
- 1 подписчик
- час назад
- 9 просмотров
0

ответов
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- вчера
- 74 просмотра
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхний угол?
- 3 подписчика
- вчера
- 355 просмотров
0

ответов
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- вчера
- 179 просмотров
0

ответов
HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- 02 мая
- 309 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 69 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 184 просмотра
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 01 мая
- 115 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 01 мая
- 130 просмотров
4

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

MiniApp для телеграмм на React+Redux

04 мая 2024, в 17:35

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

Простая доработка расширения

04 мая 2024, в 17:22

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

Разработка микросервиса на JS

04 мая 2024, в 17:09

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

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

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

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

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

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