Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
1 / 1 / 0
Регистрация: 24.04.2020
Сообщений: 41
1

Принцип работы тега overflow

28.12.2020, 21:45. Показов 335. Ответов 3
Метки нет (Все метки)

Добрый день, пишу с целью разобраться в свойствах тега overflow. По описанию в интернете все предельно понятно, но по видеоурокам, в которых автор не совсем компетентно объясняет каждый момент, не понятен принцип действия. Заранее прошу прощения за длинный код с целью показать лишь одно свойство тэга, но для полноты картины думаю лишним не будет. Возможно мой вопрос не понятен, потому постараюсь объяснить подробнее. Значение у тега: hidden, что по определению говорит об обрезании выходящего содержания, а что в конкретном случае выступает, что обрезается. Почему при удалении данного свойства из кода, просто поднимается футер наверх. Заранее большое спасибо!
Тэг расположен в классе ".site_content".

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Киномонстр - это портал о кино">
    <meta name="keywords" content="фильмы, фильмы онлайн, hd">
    <link rel="stylesheet" href="assets/css/style.css ">
    <title>Document</title>
</head>
<body>
    <div class="main"> 
        <div class="header">
            <div class="logo">
                <div class="logo_text">
                    <h1><a href="/">КиноМонстр</a></h1>
                    <h2>Кино - наша страсть!</h2>
                </div>
            </div>
 
            <div class="menubar">
                <ul class="menu">
                    <li class="selected"><a href="#">Главная</a></li>
                    <li><a href="#">Фильмы</a></li>
                    <li><a href="#">Сериалы</a></li>
                    <li><a href="#">Рейтинг фильмов</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </div>
        </div>
 
        <div class="site_content">
            <div class="sidebar_container">
                <div class="sidebar">
                    <h2>Поиск</h2>
                    <form method="post" action="#" id="search_form">
                        <input type="search" name="search_field" placeholder="Ваш запрос">
                        <input type="submit" class="btn" value="Найти">
                    </form>
                </div>
 
                <div class="sidebar">
                    <h2>Вход</h2>
                    <form method="post" action="#" name="login">
                        <input type="text" name="login_field" placeholder="логин"> 
                        <input type="password" name="password_field" placeholder="пароль">
                        <input type="submit" class="btn" value="Вход">
                        <div class="lables_passreg_text">
                            <span><a href="#">Забыли пароль?</a></span> | <span><a href="#">Регистрация</a></span>
                        </div>
                    </form>
                </div>
 
                <div class="sidebar">
                    <h2>Новости</h2>
                    <span>31.02.2020</span>
                    <p>Мы запустили расширенный поиск</p>
                    <a href="#">ЧИТАТЬ</a>
                </div>
 
                <div class="sidebar">
                    <h2>Ретинг фильмов</h2>
                    <ul>
                        <li><a href="#">Интерстеллар</a><span class="rating_sidebar"> 8.1</span></li>
                        <li><a href="#">Матрица</a><span class="rating_sidebar"> 8.0</span></li>
                        <li><a href="#">Безумный Макс</a><span class="rating_sidebar"> 7.7</span></li>
                        <li><a href="#">Облачный атлас</a><span class="rating_sidebar"> 7.9</span></li>
                    </ul>
                </div>
                
            </div>
        </div>
 
        <div class="footer">
            <p>
                <a href="#">Главная</a> |
                <a href="#">Фильмы</a> |
                <a href="#">Сериалы</a> |
                <a href="#">Ретинг фильмов</a> |
                <a href="#">Контакты</a>
            </p>
            <p>wh-db.com 2015</p>
        </div>
 
    </div>
 
 
 
</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
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
* {
    margin: 0;
    padding: 0;
}
 
body {
    font-size: 1.2em;
    background-color: #fff;
    color: #555;
}
 
p {
    padding: 0 0 20px 0;
    line-height: 1.7em;
}
 
input[type="text"], input[type="password"], input[type="search"] {
    color: #5d5d5d;
    width: 60%;
    padding: 8px; 
}
 
input, textarea {
    outline: none;
    border: none;
    border: solid 1px #f2f2f2;
}
 
h1, h2 {
    font: normal 170% 'century gothic', arial;
    margin: 0 0 15px 0;
    padding: 15px 0 5px 0;
    color: #000;
}
 
h2 {
    font-size: 140%;
}
 
a, a:hover {
    outline: none;
    text-decoration: underline;
    color: #aeb002; 
}
 
ul {
    margin: 2px 0 22px 17px;
}
 
ul li {
    margin: 0 0 6px 0;
    padding:  0 0  4px 5px;
    line-height: 1.5em;
}
 
.header {
    background-color: darkslateblue;
    height: 177px;
    font-size: 0.8em;
    margin-left: 0px;
    margin-right: 0px;
    min-width: 900px;
}
.main, .logo, .menubar, .site_content, .footer {
    margin-left: auto;
    margin-right: auto;
}
 
.logo {
    width: 880px;
    padding-bottom: 40px;
}
 
.logo h1, .logo h2 {
    font: normal 300% 'century gothic', arial, sans-serif;
    margin: 0 0 0 9px;
}
.logo_text h1, .logo_text h1 a, .logo_text h1  a:hover {
    padding: 22px 0 0 0;
    color: #fff;
    letter-spacing: 0.1em;
    text-decoration: none;
}
 
.logo_text h2 {
    font-size: 0.9em;
    padding: 4px 0 0 0; 
    color: #999;
}
 
.menubar {
    width: 900px;
    height: 46px;
}
 
ul.menu {
    float: right;
}
 
ul.menu li {
    float: left;
    padding: 0 0 0 9px;
    list-style: none;
    margin: 1px 2px 0 0;
}
 
ul.menu li a{
    font: normal 100% 'trebuchet ms', sans-serif;
    display: block;
    height: 20px;
    padding: 6px 35px 5px 28px;
    color: #fff;
    text-decoration: none; 
}
 
ul.menu li.selected a {
    color: #aeb002;
}
 
ul.menu li a:hover {
    color: #e4ec04
}
 
.site_content {
    width: 880px;
    overflow: hidden;
    margin: 20px auto 0 auto;
    background-color: white; 
}
 
.sidebar_container {
    float: right;
    width: 224px;
}
 
.sidebar {
    float: right;
    width: 222px;
    padding: 5%;
    margin: 0 0 16px 0;
    border: solid 1px #f2f2f2;
    border-radius: 5px;
    background-color: #f9f9f9;
}
 
.btn {
    padding: 8px;
    background-color: white;
    cursor: pointer;
}
 
.sidebar h2 {
    color: #136cb2;
}
 
.lables_passreg_text {
    font-size: 0.7em;
    margin-top: 3%;
    margin-left: 2%;
}
 
.sidebar ul {
    margin: 0;
}
 
.sidebar ul li {
    list-style-type: none;
    margin: 0 0 0 0;
}
 
.sidebar, .rating_sidebar {
    float: right;
}
 
.footer {
    width: 100%;
    height: 100px;
    padding: 28px 0 5px 0;
    text-align: center;
    background-color: darkslateblue;
    color: #a8aa94;
    margin-left: 0px;
    margin-right: 0px;
    min-width: 900px;
}
 
.footer a {
    color: #a8aa94;
    text-decoration: none;
}
 
.footer a:hover {
    color: white;
    text-decoration: none;
}
 
.footer p {
    padding: 0 0 10px 0; 
}
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.12.2020, 21:45
Ответы с готовыми решениями:

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

Принцип работы position
Разбираю пример: https://jsfiddle.net/rgjwe6nq/ &lt;input type=&quot;checkbox&quot; id=&quot;hmt&quot;...

Принцип работы внешних отступов
Не могу понять, эти значение отодвигают или отталкиваються

Overflow-x работает как overflow для всех осей
Почему, задав overflow-x: auto или hidden; для отдельного блока всё что вызодит по оси &quot;y&quot; тоже...

3
Модератор
2651 / 1574 / 477
Регистрация: 07.09.2019
Сообщений: 2,412
28.12.2020, 22:17 2
La_Flame17, здравствуйте. Это определенно связано с float:right для .sidebar_container. Элемент, для которого задано свойство float, исключается из основного потока; в связи с этим, если данный элемент является единственным потомком своего родителя, то родительский блок получает в результате нулевую высоту. Именно поэтому родительскому блоку в коде явно задано значение overflow (с тем же успехом можно было задать auto, а не hidden).
Здесь описан этот приём.
0
1 / 1 / 0
Регистрация: 24.04.2020
Сообщений: 41
07.01.2021, 20:39  [ТС] 3
Добрый вечер, большое спасибо за то что помогаете разобраться в этом вопросе, достаточно подробно изучил всю приведенную вами статью и почерпнул много нового) Но, тем не менее ряд вопросов у меня осталось. По сути, относительно команды overflow/auto, там ничего не говорится, за исключением того, что это просто работает из разряда: напиши в коде вот так - и получится вот так. Ниже привел пример из данной вами статьи, как влияет overlow: hidden/ overlow: auto на внешний вид блока. На картинке показано как ведет себя блок ".hero" без команды overlow: hidden, при ее появлении же в коде рамка встает как нужно вокруг всех элементов, хотя судя по описанию самой команды overflow:hidden, картинка должна была просто обрезаться самим блоком, а происходит так, что наоборот сам родитель подстраивается под дочерний элемент. Прошу извинить за такую путаницу, в общем, если кратко подвести итог, то команда overflow в данной ситуации выполняет действия, совершенно ей не свойственны, судя по описанию этой же команды. Буду благодарен за любую помощь в этом вопросе, и большое вам спасибо!
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
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <style>
    .left {
      float: left;
      width: 200px;
      /* для красоты */
 
      margin: 5px 10px 5px 0;
      text-align: center;
      border: 1px solid black;
      background: white;
    }
 
    .hero {
      background: green;
      border: 1px solid red;
    }
  </style>
</head>
 
<body style="font-size:0.8em">
 
  <div class="hero clearfix">
 
    <h2>Винни-Пух</h2>
 
    <div class="left">
      <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
      <div>Кадр из советского мультфильма</div>
    </div>
 
    <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
 
    <p>Один из самых известных героев детской литературы XX века.</p>
  </div>
 
</body>
 
</html>
1
Миниатюры
Принцип работы тега overflow  
Модератор
2651 / 1574 / 477
Регистрация: 07.09.2019
Сообщений: 2,412
08.01.2021, 23:21 4
Сейчас могу только сказать, что картинка по высоте обрезалась бы родительским блоком в том случае, если бы для родителя (блока .hero) была явно задана высота (например, в пикселях).
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.01.2021, 23:21

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

Overflow-x:auto и overflow-y:visible не работают вместе
Есть блок который должен быть overflow-x: auto; overflow-y: visible. Но вместе эти 2 свойства не...

Принцип работы overflow
Не могу понять, каким именно образом нас кидает на левый конец отрезка возможных значений. Вот...

Объясните пожалуйста принцип работы тега iframe
Разжуйте кому не сложно принцип работы тега &lt;iframe&gt;. Вот собственно вопросы: 1. Как определяется...

Cобытийность. Принцип использования и принцип работы событий в jQ и GCT
Добрый день. Подготавливаюсь к собеседованию по чеклисту и не могу найти ответ на вопрос:...

Stack overflow до начала работы программы
Писал перемножение матриц, все работало пока в какой-то момент при запуске программы на второй...

Принцип работы
Я нашёл программу очень похожую на ту которая мне нужна. Прошу объяснить принцип её работы кому...


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

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

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