0 / 0 / 0
Регистрация: 18.01.2022
Сообщений: 51

flex 1 1 auto; блок не увеличивается / не отодвигает нижний блок до низу

09.02.2022, 22:10. Показов 1039. Ответов 2
Метки flex (Все метки)

Студворк — интернет-сервис помощи студентам
https://codepen.io/Fodorov/pen/xxPwJBX


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>flex</title>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div class="hi">
                <div class="_container">
                    <div class="hi__row">
                        <div class="hi__body">
                            <div class="hi__title">Привет, друг!</div>
                            <ul class="hi__list">
                                <li>уже знаешь больше чем вчера!</li>
                                <li>Сегодня ты уже знаешь больше  вчера!</li>
                                <li>Сегодня ты уже знаешь больше чем вчера!</li>
                                <li>Сегодня ты уже знаешь  чем вчера!</li>
                            </ul>
                        </div>
                        <div class="hi__image">
                            <img src="img/hi.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="test">asdfghj
            <div class="_container">
                <div class="div__test">Я для теста</div>
            </div>
        </div>
        
    </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
.wrapper {
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1 1 auto;
}
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
09.02.2022, 22:10
Ответы с готовыми решениями:

Как прижать блок к низу блока, без абсолют и flex?
Как прижать блок к низу блока, без абсолют и flex?

Margin отодвигает внешний блок
Всем привет Столкнулся со странной проблемой: создал 2 блока. внешний - top и внутренний logo. внутреннему задаю margin-top: 10px. и...

Нужно наложить нижний блок на блок стоящий выше
&lt;html&gt; &lt;body&gt; &lt;div id=&quot;wrapper&quot;&gt; &lt;div id=&quot;main&quot;&gt; &lt;div id=&quot;header&quot;&gt; &lt;/div&gt; &lt;div id=&quot;content&quot;&gt; ...

2
 Аватар для NTHing
1782 / 963 / 388
Регистрация: 26.11.2014
Сообщений: 1,966
Записей в блоге: 1
09.02.2022, 22:33
Лучший ответ Сообщение было отмечено YevhenFodorov как решение

Решение

Так если попробовать...
CSS
1
2
3
4
5
6
7
8
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.content {
    flex: 1 1 auto;
}
1
0 / 0 / 0
Регистрация: 18.01.2022
Сообщений: 51
10.02.2022, 17:45  [ТС]
спасибо, помогло.. я учусь и в видео урока работает и без свойства height: 100vh; почему у меня не работает без этого свойства? нИпанятна..)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
10.02.2022, 17:45
Помогаю со студенческими работами здесь

Прижать блок к низу
&lt;body&gt; &lt;div id=&quot;footer&quot;&gt; &lt;div class=&quot;footer-items&quot;&gt;содержимое1&lt;/div&gt; &lt;div...

Не получается прибить блок к низу
Здравствуйте. Левая колонка фиксированная остаётся на месте а содержимое контента прокручивается. Помогите пожалуйста прибить блок...

Прижать блок к низу экрана
Здравствуйте. Вертикальную черную полоску портфолио не могу прижать к низу экрана. С помощью fixed получается, а absolute нет: ...

Прижать блок к низу родительского?
Как прижать блок с корзиной и ценой к низу родительского? http://coffee-cartel.ru/kofe-v-ofis

Прижать блок к низу textarea
Передо мной стоит задача. Нужно чтоб на дне текстэриа лежал блок с какой-либо надписью. Я решаю проблему так. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

Новые блоги и статьи
Отчёт о затраченных материалах за определенный период с макетом печатной формы
Maks 21.04.2026
Отчёт из решения ниже размещён в конфигурации КА2. Задача: показать затраченные материалы за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В качестве. . .
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru