Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.62/29: Рейтинг темы: голосов - 29, средняя оценка - 4.62
31 / 35 / 11
Регистрация: 14.07.2013
Сообщений: 146
1

Появляется полоса прокрутки

17.06.2015, 13:22. Показов 5427. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день. Пытаюсь научиться делать сайты с фиксированной шириной. Почему-то появляется вертикальная полоса прокрутки. Как можно было бы от нее избавиться? Я заметил, что эта полоса появляется из-за шапки, т.е. крутить вниз можно на 100px (размер шапки). И сразу хотелось бы спросить, не является ли представленный ниже код гавнокодом? HTML изучаю недавно, но что то мне подсказывает, что сайты оформляются по-другому.

Кликните здесь для просмотра всего текста
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <link type="text/css" rel="stylesheet" href="reset.css"/>
    <title>Test site</title>
  </head>
  <body>
  <section id="wrapperheader">  <!--Растягивается на всю ширину экрана, чтобы продолжить фон шапки-->
    <div id="header">           <!--А тут собственно шапка с фиксированным размером 960px-->
      <p id="title">Title</p>
      <ul id="menu">
        <li>Пункт</li>
        <li>Пункт</li>
        <li>Пункт</li>
      </ul>
    </div>
  </section>
  <section id="wrapperbody">    <!--Растягивается на всю ширину экрана, чтобы продолжить фон основной области сайта-->
    <div id="mainarea">         <!--А тут собственно область основного контента с фиксированным размером 960px-->
      <div id="contentarea">
        <p>Тут будет контент</p>
      </div>
      <div id="sidebar">
        <p>Тут будет сайдбар</p>
      </div>
    </div>
  </section>
  </body>
</html>


Кликните здесь для просмотра всего текста
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
/***********************************/
 
/* [url]http://meyerweb.com/eric/tools/css/reset/[/url]
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/**********************************************/
 
 
 
#wrapperheader {
  width: 100%;
  height: 100px;
  background: #333333;
}
 
#header {
  width: 960px;
  height: 100%;
  margin: 0 auto;
}
 
#title {
  float: left;
}
 
#menu {
  float: right;
}
 
#menu li {
  display: inline-block;
}
 
#wrapperbody {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
}
 
#mainarea {
  width: 960px;
  margin: 0 auto;
}
 
#contentarea {
  width: 500px;
  background: white;
  margin-top: 50px;
  float: left;
}
 
#sidebar {
  width: 300px;
  float: right;
  margin-top: 50px;
  background: white;
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
17.06.2015, 13:22
Ответы с готовыми решениями:

появляется полоса прокрутки
Пытаюсь сделать первую верстку и вот какая проблема Есть рисунок размером 933*817 который я ставлю...

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

Появляется полоса прокрутки и
Подскажите, пожалуйста, на сайте есть спойлер, который разворачивается вниз, вместе с этим справа...

Почему не появляется горизонтальная полоса прокрутки?
Есть таблица: http://www.formass.ru/extensions/otzyvy Таблица обернута в &lt;div...

4
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
17.06.2015, 13:48 2
Цитата Сообщение от dima55501 Посмотреть сообщение
#wrapperheader {
* width: 100%;
* height: 100px;
* background: #333333;
}
Цитата Сообщение от dima55501 Посмотреть сообщение
#wrapperbody {
* position: absolute;
* width: 100%;
* height: 100%;
* background: #f2f2f2;
}
100px + 100% = полоса прокрутки на 100px.
1
31 / 35 / 11
Регистрация: 14.07.2013
Сообщений: 146
17.06.2015, 13:50  [ТС] 3
Shakalaka, ага, я понял. А как правильно это исправить? Задавать для #wrapperhead position:absolute и ставить высоту 10% ?
P.S. Нет, такой вариант не подходит.
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
17.06.2015, 13:56 4
Лучший ответ Сообщение было отмечено dima55501 как решение

Решение

Блок wrapperheader засунуть в wrapperbody. И для wrapperbody задавать не height:100%, а min-height:100%;
1
31 / 35 / 11
Регистрация: 14.07.2013
Сообщений: 146
17.06.2015, 14:01  [ТС] 5
Shakalaka, спасибо большое. Не знаю как, но оно работает
0
17.06.2015, 14:01
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
17.06.2015, 14:01
Помогаю со студенческими работами здесь

Полоса прокрутки появляется но она не активна
В общем создан макет из таблиц.Внизу кода есть ячейка в которой должна появляться полоса прокрутки...

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

При разрешении 800х600 на сайте появляется горизонтальная полоса прокрутки, а при разрешении 1152х864 на странице справа пустота.
На главной странице моего сайта http://www.univer-comp.ru при разрешении 800х600 появляется...

Полоса прокрутки
Доброго времени суток, такая ситуация. Практикую понемногу сайтостроение посредством редактирования...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru