Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.70/47: Рейтинг темы: голосов - 47, средняя оценка - 4.70
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 35

Блок виден не полностью, не появляется вертикальная полоса прокрутки

21.05.2017, 15:25. Показов 9079. Ответов 14

Студворк — интернет-сервис помощи студентам
Блок виден не полностью, не появляется вертикальная полоса прокрутки, не понимаю почему так, в css что-то намудрил?
Миниатюры
Блок виден не полностью, не появляется вертикальная полоса прокрутки  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.05.2017, 15:25
Ответы с готовыми решениями:

Не видна вертикальная полоса прокрутки
Добрый день. В Win 8.1 после перехода в полноэкранный режим браузера и последующего выхода из него все окна любых программ стали выходить...

Вертикальная полоса прокрутки в комбобоксе
// Создание комбобокса ::hWnd = CreateWindowEx(NULL, // По умолчанию L"COMBOBOX", // Комбобокс ...

Вертикальная полоса прокрутки в MessageBox
Как при программировании под Windows в MessageBox сделать вертикальную полосу прокрутки, если большой текст (а то он обрезается)?

14
0 / 0 / 1
Регистрация: 21.05.2017
Сообщений: 21
21.05.2017, 17:14
Наверно злоупотребил position:absolute в css
0
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 35
21.05.2017, 17:40  [ТС]
только absolute или fixed тоже? а как вообще выравнивать блоки если не использовать position, я просто учусь еще только
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
21.05.2017, 17:58
Beeeeetlejjuice, так лучше?

0
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 35
21.05.2017, 18:00  [ТС]
Это троллинг?)
0
0 / 0 / 1
Регистрация: 21.05.2017
Сообщений: 21
21.05.2017, 18:00
Можно делать все использую только относительную позицию (relative). Или можно исправитить твой вариант, укажи height:100% (к примеру) у большого серого дива, под синей шапкой и добавь overflow-y:auto
0
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 35
21.05.2017, 18:13  [ТС]
большой серый див это боди, указал, но не помогло.
а как делать через релейтив?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
21.05.2017, 18:17
Цитата Сообщение от Beeeeetlejjuice Посмотреть сообщение
Это троллинг?)
Отнюдь. Вы предоставили изображение с проблемой - я предоставил изображение с решенной проблемой.
Для более продуктивного обсуждения проблемы, предоставьте код, файл или в крайнем случае - ссылку на страницу.
Или будем и дальше испытывать экстрасенсорные способности FaqSid?
1
0 / 0 / 1
Регистрация: 21.05.2017
Сообщений: 21
21.05.2017, 18:22
Лучший ответ Сообщение было отмечено Beeeeetlejjuice как решение

Решение

Все очень просто, тут без твоего кода мне тяжело помочь. Если тебе нужны такие отступы то их можно добиться или margin-top, или блок по центру: margin: 0px auto, или же совсем для грешников position:relative и играться с top, left, right - позициями.
0
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 35
21.05.2017, 18:22  [ТС]
index

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile</title>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700' rel='stylesheet' type='text/css'>
  <!-- Compiled and minified CSS -->
 
 
</head>
<body>
  <header>
        <div class="bg-navbar">
          <img src="F:\involta\img\аватар_2017-05-18\аватар.png"
           class="layer">
          <img src="F:\involta\img\shape_2017-05-18\shape.png"
            class="shape">
          <img src="F:\involta\img\fill-234_2017-05-18\fill-234.png"
              class="Fill-234">
 
        </div>
        <div class="bg-menu">
          <div class="tab-wrap">
 
            <input type="radio" name="tabs" id="tab1" >
            <div class="tab-label-content" id="tab1-content">
              <label for="tab1">ГЛАВНАЯ</label>
              <div class="tab-content"></div>
            </div>
 
            <input type="radio" name="tabs" id="tab2" >
            <div class="tab-label-content" id="tab2-content">
              <label for="tab2">НОВОСТИ</label>
              <div class="tab-content"></div>
            </div>
 
            <input type="radio" name="tabs" id="tab3">
            <div class="tab-label-content" id="tab3-content">
              <label for="tab3">ПОДРАЗДЕЛЕНИЯ</label>
              <div class="tab-content"></div>
            </div>
 
             <input type="radio" name="tabs" id="tab4">
             <div class="tab-label-content" id="tab4-content">
              <label for="tab4">РАСПИСАНИЯ</label>
              <div class="tab-content"></div>
            </div>
 
            <input type="radio" name="tabs" id="tab5">
             <div class="tab-label-content" id="tab5-content">
              <label for="tab5">ЛЮДИ</label>
              <div class="tab-content"></div>
            </div>
 
                <input type="radio" name="tabs" id="tab6" checked>
             <div class="tab-label-content" id="tab6-content">
              <label for="tab6">МОЙ ПРОФИЛЬ</label>
              <div class="tab-content"></div>
            </div>
 
            <div class="slide"></div>
 
        </div>
  </header>
  <main>
        <p class="MyP">МОЙ ПРОФИЛЬ</p>
 
        <div class="container">
          <div class="mdl-tabs mdl-js-tabs">
            <div class="mdl-tabs__tab-bar">
                <a href="#profile" class="mdl-tabs__tab is-active">ПРОФИЛЬ</a>
                <a href="#courses" class="mdl-tabs__tab">КУРСЫ</a>
                <a href="#portfolio" class="mdl-tabs__tab">ПОРТФОЛИО</a>
            </div>
 
            <div class="mdl-tabs__panel is-active" id="profile">
 
            </div>
            <div class="mdl-tabs__panel" id="courses">
 
            </div>
            <div class="mdl-tabs__panel" id="portfolio">
 
            </div>
          </div>
 
          <div class="blue_shape">
            <img src="F:\involta\img\photo_2017-05-21\photo.png"
                class="photo">
            <div class="black">
              <p><i class="material-icons ph" >camera_alt</i>Обновить фотографию</p>
            </div>
          </div>
          <h4><i class="material-icons" class="man">record_voice_over</i>О СЕБЕ</h4>
          <p class="vk">«ВКонта́кте» — социальная сеть, принадлежащая Mail.Ru Group. Располагается по адресу vk.com. По данным SimilarWeb, «ВКонтакте» является первым по популярности сайтом в России и на Украине, 4-м — в мире.</p>
 
        </div>
        </div>
 
  </main>
  <footer>
  </footer>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
  <!-- Latest compiled and minified JavaScript -->
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
</body>
</html>
и css
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
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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
@import url('https://fonts.googleapis.com/css?family=Roboto');
 
*{
  margin: 0;
  padding: 0;
}
 
html {
    font-family: Roboto;
  }
 
body {
  background-color: #edecec;
  height:auto;
  overflow-y:auto;
}
 
 
.bg-navbar {
  width: 1440px;
  height: 160px;
  background-color: #03a9f4;
  margin: 0;
}
 
.layer {
  width: 54px;
  height: 54px;
  object-fit: contain;
  position:fixed; top: 36px; right: 48px;
}
 
.shape{
  width: 20px;
  height: 23.3px;
  object-fit: contain;
  position:fixed; top: 51px; right: 134px;
}
 
.Fill-234 {
  width: 20px;
  height: 16px;
  object-fit: contain;
  position:fixed; top: 55px; right: 192px;
}
 
.bg-menu{
  width: 1440px;
  height: 50px;
  background-color: #05a2eb;
  position: fixed; top: 110px;
}
 
/*Вкладки меню*/
 
.tab-wrap {
  width: 50%;
  margin-left: 0%;
  position: relative;
  display: flex;
  top: 0px;
}
 
input[type="radio"][name="tabs"] {
  position: absolute;
  z-index: -1;
}
input[type="radio"][name="tabs"]:checked + .tab-label-content label {
  color: white;
}
input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
  display: block;
}
input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide {
  left: calc((100% / 6) * 0);
}
input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide {
  left: calc((100% / 6) * 1);
}
input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ .slide {
  left: calc((100% / 6) * 2);
}
input[type="radio"][name="tabs"]:nth-of-type(4):checked ~ .slide {
  left: calc((100% / 6) * 3);
}
input[type="radio"][name="tabs"]:nth-of-type(5):checked ~ .slide {
  left: calc((100% / 6) * 4);
}
input[type="radio"][name="tabs"]:nth-of-type(6):checked ~ .slide {
  left: calc((100% / 6) * 5);
}
input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide {
  left: 0;
}
 
label {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  background-color: #05a2eb;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 50px;
  transition: color 0.2s ease;
  width: 100%;
}
 
.slide {
  background: #ffffff;
  width: calc(100% / 6);
  height: 3px;
  position: absolute;
  left: 0;
  top: calc(100% - 3px);
  transition: left 0.3s ease-out;
}
 
.tab-label-content {
  width: 100%;
}
.tab-label-content .tab-content {
  position: absolute;
  top: 100px;
  left: 16px;
  line-height: 130%;
  display: none;
}
 
@media screen and (max-width: 800px) {
  h1 {
    padding: 40px 0 90px 10%;
  }
 
  .tab-wrap {
    width: 80%;
    margin-left: 10%;
    top: -106px;
  }
}
.follow {
  width: 42px;
  height: 42px;
  border-radius: 50px;
  background: #03A9F4;
  display: block;
  margin: 300px auto 0;
  white-space: nowrap;
  padding: 13px;
  box-sizing: border-box;
  color: white;
  transition: all 0.2s ease;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}
.follow i {
  margin-right: 20px;
  transition: margin-right 0.2s ease;
}
.follow:hover {
  width: 134px;
}
.follow:hover i {
  margin-right: 10px;
}
 
@media screen and (max-width: 800px) {
  .follow {
    margin: 400px auto 0;
  }
}
/*-----------------*/
 
.MyP{
  position: fixed; top: 213px; left: 172px;
  font-family: Roboto;
  font-size: 16px;
  color: #777777;
}
 
.container {
  width: 1170px;
  height: 1726px;
  background-color: #ffffff;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  position: fixed; left: 135px; top: 250px;
}
 
.mdl-tabs__tab {
   width: 33.33%;
}
 
a{
  font-family: Roboto;
  font-size: 16px;
}
 
.blue_shape{
  width: 300px;
  height: 1627px;
  background-color: #b3deff;
  position: fixed; left: 180px; top: 349px;
}
 
.photo {
  width: 260px;
  height: 340px;
  object-fit: contain;
  border-radius: 4px;
  position: fixed; left: 200px; top: 370px;
}
 
.black{
  width: 260px;
  height: 32px;
  opacity: 0.7;
  border-radius: 4px;
  background-color: #000000;
  position: fixed; left: 200px; top: 370px;
}
 
p{
  font-size: 10px;
  text-align: center;
  color: #ffffff;
  font-family: Roboto;
  position: fixed; left: 287px; top: 380px;
}
 
.ph{
  width: 17.3px;
  height: 15.6px;
  background-color: #000000;
  position: fixed; left: 264px; top: 378px;
}
 
.man{
  width: 22px;
  height: 19.3px;
  position: fixed; left: 544px; top: 362px;
}
 
h4 {
 
  font-family: Roboto;
  font-size: 24px;
  font-weight: bold;
  color: #000000;
  position: fixed; left: 580px; top: 360px;
}
 
.vk{
  width: 574.5px;
  height: 76px;
  font-family: Roboto;
  font-size: 16px;
  color: #000000;
  position: fixed; top: 425px; left: 544px;
  text-align: left;
}
в архиве приложил полную папку, для удобства
Вложения
Тип файла: rar involta.rar (2.20 Мб, 2 просмотров)
0
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 35
21.05.2017, 18:25  [ТС]
приложил код
0
0 / 0 / 1
Регистрация: 21.05.2017
Сообщений: 21
21.05.2017, 18:26
CSS
1
2
3
4
5
body {
  background-color: #edecec;
  height:auto;
  overflow-y:auto;
}
height:auto; или height:100% - большая разница
0
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 35
21.05.2017, 18:33  [ТС]
сначала height:100% попробовал, не вышло, попробовал авто, тоже не вышло

Добавлено через 3 минуты
делаю, через позишн релейтив, вроде получается
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
21.05.2017, 18:54
Лучший ответ Сообщение было отмечено Beeeeetlejjuice как решение

Решение

Для начала, убирайте везде position:fixed. Если нужно, чтобы шапка была прилеплена сверху, тогда убираем везде и добавляем этот стиль только для <header>.
Т.к. у вас почти для каждого элемента установлено фиксированное позиционирование, думать что делать дальше - смысла нет, пока вы это не исправите.
1
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 35
21.05.2017, 19:04  [ТС]
сейчас этим занимаюсь, вроде исправляется
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
21.05.2017, 19:04
Помогаю со студенческими работами здесь

Не работает вертикальная полоса прокрутки для TextBox
Здравствуйте. Не могу разобраться с полосой прокрутки. Мне в приложении нужна вертикальная полоса прокрутки, что бы видеть весь текст,...

Использование WS_TABSTOP, вертикальная полоса прокрутки у LISTBOX'а
Мне необходимо создать форму и компоненты (кнопки, списки и т. д.) с помощью WinAPI, почти всё получилось, но у меня возникло два вопроса: ...

Вертикальная полоса прокрутки элемента при неизвестной высоте
Есть код. Как к items добавить полосу прокрутки, если высота блока .popup растягивается на всю ширину окна, а высота title явно не задана. ...

Появляется полоса прокрутки
Здравствуйте! Почему появляется полоса прокрутки на экранах от 1400 px если блок который выпирает задан абсолютно, браузер разве не должен...

Появляется полоса прокрутки
Добрый день. Пытаюсь научиться делать сайты с фиксированной шириной. Почему-то появляется вертикальная полоса прокрутки. Как можно было бы...


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

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Новые блоги и статьи
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 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru