Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
novichek_1905
410 / 294 / 130
Регистрация: 16.02.2018
Сообщений: 829
1

Не работает height 100% в блоке c flex-grow

15.12.2018, 22:19. Просмотров 2088. Ответов 3
Метки нет (Все метки)

Доброе время суток! Столкнулся с проблемой, не получается растянуть на всю высоту экрана блок слева.
Задумка простая, есть футер и есть хедер, блок слева будет находиться между ними, прижимая футер всегда книзу, футер и хедер будут иметь динамическую высоту, так как контента может быть самым разным. Когда пунктов меню много, или высота экрана меньше чем высота блока с пунктами меню, появляется вертикальный скрол.

Для растягивания блока, использую свойство flex-grow: 1; таким образом он занимает все свободное пространство и работает как мне нужно, но внутри этого блока, есть ещё один блок, который нужно также растягивать, задал ему высоту 100% но она не отработала. Как можно растянуть его иначе?
PHP/HTML
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial;
  }
  header, footer{
    height: 80px;
    background-color: gray;
    flex-shrink: 0;
    margin-bottom: 10px;
  }
  footer{
    margin-top: 10px;
    margin-bottom: 0;
  }
 
  body{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 960px;
    margin: 0 auto;
    height: 100vh;
  }
 
  .box{
    flex-grow: 1;
  }
  .item{
    height: 100%;
    background-color: gray;
    width: 240px;
  }
  nav a{
    display: block;
    padding: 10px;
    color: #fff;
  }
  nav{
    overflow-y: auto;
  }
  </style>
</head>
<body>
  <header></header>
  <div class="box">
    <div class="item">
      <nav>
        <a href="#">item1</a>
        <a href="#">item2</a>
        <a href="#">item3</a>
        <a href="#">item4</a>
        <a href="#">item5</a>
        <a href="#">item6</a>
        <a href="#">item7</a>
        <a href="#">item8</a>
        <a href="#">item9</a>
        <a href="#">item10</a>
      </nav>
    </div>
  </div>
  <footer></footer>
</body>
</html>
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.12.2018, 22:19
Ответы с готовыми решениями:

Не работает flex-grow
&lt;div class=&quot;row flex-gr&quot;&gt; &lt;div class=&quot;col&quot;&gt;1&lt;/div&gt; &lt;div class=&quot;col&quot;&gt;2&lt;/div&gt; ...

Как прописывать flex-basis и flex-grow/flex-shrink?
Доброго времени суток? Объясните , пожалуйста, такую вещь, - куда вписывать свойства flex-basis, а...

Flex-grow и размеры блока
Всем привет, товарищи. В общем, у меня есть 2 ряда с блоками. (см фото) Все ячейки с первого ряда...

Блок на растягивается на height:100%; min-height: 100%;
Подскажите пожалуйста, почему мне не получается растянуть блок во всю высоту браузера? Вроде бы...

Не работает свойство height:100%
почему то ставлю высоту 100 % а элемент не растягивается до высоты родителя.

3
Lazy_Den
3133 / 2748 / 1384
Регистрация: 15.01.2014
Сообщений: 6,054
16.12.2018, 00:09 2
Цитата Сообщение от novichek_1905 Посмотреть сообщение
задал ему высоту 100% но она не отработала
В Хроме... А в том же FF работать будет. Такое поведение известно. Варианты решения есть разные, но можно просто продолжить ту же логику с flexbox. Для элемента .box добавляете свойства display: flex; и flex-direction: column;, а для дочернего элемента .item - свойство flex-grow: 1;

Добавлено через 41 секунду
P.S. Про вендорные префиксы не забудьте.
1
novichek_1905
410 / 294 / 130
Регистрация: 16.02.2018
Сообщений: 829
16.12.2018, 00:31  [ТС] 3
Понял, а может есть где статья, или объяснения почему так, может там есть ещё и другие особенности flex?
0
Lazy_Den
3133 / 2748 / 1384
Регистрация: 15.01.2014
Сообщений: 6,054
16.12.2018, 00:39 4
novichek_1905, это не особенности flexbox )) А почитать есть что, например, о том, как рассчитывается высота элементов в процентах

Добавлено через 1 минуту
И не нужно забывать о том, что технология flexbox еще молода, а разработчики разных браузеров всё никак не найдут общий язык )) Поэтому поведение, в некоторых случаях, может ощутимо отличаться в том или ином браузере
0
16.12.2018, 00:39
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.12.2018, 00:39

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

DIV height:100% не работает
Уже пролазил весь инет вместе с Google и нет никаких результатов. Оказывается что заполнить...

Высота картинок в хроме в flex-блоке
Есть такая разметка: &lt;div class=&quot;flex&quot;&gt; &lt;img src=&quot;1.jpg&quot; alt=&quot;&quot;&gt; &lt;img src=&quot;2.jpg&quot;...

Не видно последнюю строчку в блоке при любом значении max-height
Я применил этот код, все работает, но какое бы я значение для max-height при hover не указал,...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.