Высота скролла по высоте окна

@maxon-by · Регистрация: 06.10.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте, народ!

Нужно решить проблему с высотой скролла.
Оно должно меняться по высоте окна.
На данный момент он почему-то не на всё окно

Ссылка на домен, где находится проблема со скроллом: site

Вот скрин:

@magnusmax · 14.09.2016, 21:43

Если я правильно понял, то уберите в

CSS
1
2
.popup {
    width: 450px;}

@PeterLS · 14.09.2016, 22:28

maxon-by, засуньте блок list еще в один див и используйте абсолютное позиционирование.

@maxon-by · 14.09.2016, 22:28 **[ТС]**

magnusmax, не поняли меня.
есть скролл по высоте
но почему-то он не по высоте окна а криво (немного спрятан внизу).

@PeterLS · 14.09.2016, 22:30

Я так понял, это будет чатик? Новые сообщения будут сверху или снизу? Отсюда и будем плясать

@magnusmax · 14.09.2016, 22:46

CSS
1
.list

задайте высоту меньше.

@maxon-by · 14.09.2016, 23:07 **[ТС]**

magnusmax, высоту вот и надо сделать под высоту экрана. Имею ввиду,что при уменьшении - уменьшается, при увеличении - увеличивается. Т.е. постоянно на всю высоту окна

Добавлено через 24 секунды
PeterLS, не получилось

@Fedor92 · 14.09.2016, 23:30

maxon-by, боги...

У Вас для body задано свойство overflow:hidden поэтому не видно часть скролла...

@maxon-by · 14.09.2016, 23:31 **[ТС]**

Fedor92, скролла не должно бытьна body
скролл должен быть на списке.
текст, естественно, должен быть всегда и остаётся вверху.

@Fedor92 · 14.09.2016, 23:35

Сообщение от maxon-by

Fedor92, скролла не должно быть на body

Вы хоть понимаете о чём говорите? body - есть блок родительский... Когда часть дочернего блока торчит за пределами родительского при overflow:hidden - она показываться не будет... Поэтому дочерний блок нужно подогнать под высоту родительского, чтобы он целиком уместился вместе со скроллом...

@maxon-by · 14.09.2016, 23:40 **[ТС]**

Fedor92, хорошо, но ведь body{height: 100vh;} не работает;
а мне необходимо, чтобы страница было по высоте экрана, а скролл был на списке аватарок.

@Fedor92 · 14.09.2016, 23:54

maxon-by, задание для универа или на работу?

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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{box-sizing:border-box; margin: 0; padding: 0}
            html,body{width: 100%; height: 100%; overflow:hidden}
            .popup{position:relative}
            .top_about{position:absolute; left:0; top:0; width: 380px; background: #fff;}
            .wrap_list{width: 400px; max-height:100%; overflow:scroll}
            .list{width:inherit; height:100vh}
        </style>
    </head>
    <body>
    <div class="popup">
        <div class="top_about">
            <h2>Высота заголовка не фиксирована. Зависит от введенного текста</h2>
        </div>
        <div class="wrap_list">
            <div class="list">
                <ul>
                    <li>
                        <img src="img/avatars/1.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/2.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/4.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/5.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/8.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/9.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/10.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/11.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/12.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/13.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/7.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                </ul>
            </div>
        </div>
 
    </div>
 
    </body>
</html>

@maxon-by · 15.09.2016, 00:12 **[ТС]**

Fedor92, я так сделал сначала, но это не совсем правильно (не по заданию).

Задание: ссылка на задание (видео)

- лайаут страницы занимает 100% высоты окна браузера (изменяется высота только белой части - на видео это видно)

Требования к попапу:
- лежит в боди
- ширина фиксированная
- top, left фиксированы
- высота попапа переменная (смотри видео)
- если контента много, он скролится как показано на видео (скрол можно оставить стандартный)
- если контента мало, высота попапа уменьшается пропорционально содержимому, скрола нет
- высота заголовка переменная, зависит от количества текста
- использовать js нельзя (только css)

Какая проблема на данный момент у меня, которую я не могу решить:
- если безблока с текстом, всё работает замечательно (скроллинг на всю высоту экрана адаптируется под высоту)

- а если добавляем блок с текстом сверху, то блок со сроллом смещается чуть вниз (что сделать, чтобы он не смещался?)

@Fedor92 · 15.09.2016, 00:55

maxon-by, обычно я не занимаюсь благотворительностью, ибо, если верстаку дали задание он должен его сделать сам... Или как говорят: упал в воду либо учись плавать - либо тони - третьего не дано... Это на будущее, если что... Вот код, смотрим внимательно, ещё раз смотрим видео и пытаемся делать выводы(а главное следим за бегунком прокрутки куда он заезжает)...

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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{box-sizing:border-box; margin: 0; padding: 0}
            html,body{width: 100%; height: 100%}
            .popup{position:fixed; left:0; top:0; box-shadow:0 0 3px 3px rgba(0,0,0,0.5)}
            .top_about{position:absolute; width: 400px; background: #fff; box-shadow:0 0 3px 3px rgba(0,0,0,0.5)}
            .wrap_list{width: 400px; max-height:100%; height:100vh; overflow-y:scroll; overflow-x:hidden}
            .list{width:inherit}
            ::-webkit-scrollbar-track
            {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                background-color: #f5f5f5;
            }
 
            ::-webkit-scrollbar
            {
                width: 6px;
                background-color: #f5f5f5;
            }
 
            ::-webkit-scrollbar-thumb
            {
                background-color: #333;
                border-radius:10px
            }
        </style>
    </head>
    <body>
    <div class="popup">
        <div class="top_about">
            <h2>Высота заголовка не фиксирована. Зависит от введенного текста</h2>
        </div>
        <div class="wrap_list">
            <div class="list">
                <ul>
                    <li>
                        <img src="img/avatars/1.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/2.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/4.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/5.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/8.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/9.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/10.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/11.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/12.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/13.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/7.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                        <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/3.jpg" alt="">
                        <p class="vacancy">Вакансия</p>
                        <p class="user_desc">Description</p>
                    </li>
                    <li>
                        <img src="img/avatars/6.jpg" alt="">
                        <p class="user_name">Name</p>
                        <p class="user_desc">Description</p>
                    </li>
                </ul>
            </div>
        </div>
 
    </div>
 
    </body>
</html>

На доп. вопросы отвечать не буду, допиливаем самостоятельно...

@maxon-by · 15.09.2016, 01:45 **[ТС]**

Fedor92, я благодарю и извиняюсь одновременно за это тестовое задание. С первого взгляда оно может быть легким, но я уже мозг себе вынес.
Ваш код ещё более неправильный, чем мой.
На видео показано, что блок со скроллом НАЧИНАЕТСЯ ПОД блоком с тексом, мало того - при изменении блока с тестом (высоты), блок со скроллом также смещается вместе с ним.

У меня же (показано на скрине), скролл ужёш вниз (внизу страницы он ушёл ещё ниже).

@Fedor92 · 15.09.2016, 02:12

Сообщение от maxon-by

Ваш код ещё более неправильный, чем мой.

Смешно... В таком случае изобретайте велосипед...

Сообщение от maxon-by

На видео показано, что блок со скроллом НАЧИНАЕТСЯ ПОД блоком с тексом, мало того - при изменении блока с тестом (высоты), блок со скроллом также смещается вместе с ним.

Я же сказал дополнять ничего не буду!!! Если Вы не видите, что бегунок заезжает под блок с текстом - это Ваша личная проблема, а сам блок не смещается со скролом - он, как раз таки статичен, а скроллится лишь список... В общем удачи в разработках... Сделаете свой вариант - выложите код....

@maxon-by · 15.09.2016, 09:10 **[ТС]**

Fedor92, в вашем коде, если увеличивать текст в верхней колонке - он будет менятьься. но не будет менять скроллинг. Блок с текстом будет всё больше наезжать на список со скроллом.

@mrtoxas · 15.09.2016, 11:14

CSS
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
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.wrapper {
  width: 300px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 1px solid black;
  height: 100%;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}
.header {
  border-bottom: 1px solid black;
  width: 300px;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
.header span {
  margin: 10px;
  display: block;
}
.content {
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden;
  position: relative;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
}
.content ul {
  margin: 0;
  list-style: none;
}
.item {
  display: block;
  padding-top: 20px;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div class="wrapper">
  <div class="header"><span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum dolor quis repudiandae consequuntur.</span></div>
  <div class="content">
    <ul>
      <li><span class="item">item1</span></li>
      <li><span class="item">item2</span></li>
      <li><span class="item">item3</span></li>
      <li><span class="item">item4</span></li>
      <li><span class="item">item5</span></li>
      <li><span class="item">item6</span></li>
      <li><span class="item">item7</span></li>
      <li><span class="item">item8</span></li>
      <li><span class="item">item9</span></li>
      <li><span class="item">item10</span></li>
    </ul>
    </div>
</div>

Результат

@maxon-by · 15.09.2016, 12:46 **[ТС]**

mrtoxas, а можно такое сделать без флексбокса?

@mrtoxas · 15.09.2016, 14:49

Сообщение от maxon-by

Требования к попапу:
- использовать js нельзя (только css)

Сообщение от maxon-by

а можно такое сделать без флексбокса?

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245

	Высота скролла по высоте окна 14.09.2016, 21:28. Показов 6578. Ответов 19 Метки нет (Все метки) Здравствуйте, народ! Нужно решить проблему с высотой скролла. Оно должно меняться по высоте окна. На данный момент он почему-то не на всё окно Ссылка на домен, где находится проблема со скроллом: site Вот скрин: Миниатюры 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	14.09.2016, 22:28
	maxon-by, засуньте блок list еще в один див и используйте абсолютное позиционирование. 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	14.09.2016, 22:28 [ТС]
	magnusmax, не поняли меня. есть скролл по высоте но почему-то он не по высоте окна а криво (немного спрятан внизу). 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	14.09.2016, 22:30
	Я так понял, это будет чатик? Новые сообщения будут сверху или снизу? Отсюда и будем плясать 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	14.09.2016, 23:07 [ТС]
	magnusmax, высоту вот и надо сделать под высоту экрана. Имею ввиду,что при уменьшении - уменьшается, при увеличении - увеличивается. Т.е. постоянно на всю высоту окна Добавлено через 24 секунды PeterLS, не получилось 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.09.2016, 23:30
	maxon-by, боги... У Вас для body задано свойство overflow:hidden поэтому не видно часть скролла... 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	14.09.2016, 23:31 [ТС]
	Fedor92, скролла не должно бытьна body скролл должен быть на списке. текст, естественно, должен быть всегда и остаётся вверху. 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	14.09.2016, 23:40 [ТС]
	Fedor92, хорошо, но ведь body{height: 100vh;} не работает; а мне необходимо, чтобы страница было по высоте экрана, а скролл был на списке аватарок. 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	15.09.2016, 00:12 [ТС]
	Fedor92, я так сделал сначала, но это не совсем правильно (не по заданию). Задание: ссылка на задание (видео) - лайаут страницы занимает 100% высоты окна браузера (изменяется высота только белой части - на видео это видно) Требования к попапу: - лежит в боди - ширина фиксированная - top, left фиксированы - высота попапа переменная (смотри видео) - если контента много, он скролится как показано на видео (скрол можно оставить стандартный) - если контента мало, высота попапа уменьшается пропорционально содержимому, скрола нет - высота заголовка переменная, зависит от количества текста - использовать js нельзя (только css) Какая проблема на данный момент у меня, которую я не могу решить: - если безблока с текстом, всё работает замечательно (скроллинг на всю высоту экрана адаптируется под высоту) - а если добавляем блок с текстом сверху, то блок со сроллом смещается чуть вниз (что сделать, чтобы он не смещался?) 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	15.09.2016, 01:45 [ТС]
	Fedor92, я благодарю и извиняюсь одновременно за это тестовое задание. С первого взгляда оно может быть легким, но я уже мозг себе вынес. Ваш код ещё более неправильный, чем мой. На видео показано, что блок со скроллом НАЧИНАЕТСЯ ПОД блоком с тексом, мало того - при изменении блока с тестом (высоты), блок со скроллом также смещается вместе с ним. У меня же (показано на скрине), скролл ужёш вниз (внизу страницы он ушёл ещё ниже). 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	15.09.2016, 09:10 [ТС]
	Fedor92, в вашем коде, если увеличивать текст в верхней колонке - он будет менятьься. но не будет менять скроллинг. Блок с текстом будет всё больше наезжать на список со скроллом. 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	15.09.2016, 12:46 [ТС]
	mrtoxas, а можно такое сделать без флексбокса? 0

Высота скролла по высоте окна

Решение