Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.90/21: Рейтинг темы: голосов - 21, средняя оценка - 4.90
403 / 19 / 5
Регистрация: 17.01.2017
Сообщений: 572

Контент налезает на футер. Как это исправить?

30.11.2019, 14:44. Показов 4137. Ответов 4
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Я решила изменить структуру сайта, контент разместить выше, а левое и правое меню ниже. В итоге если контент слишком большой то он налезает на футер

Сам футер сдвигается за счёт правого и левого меню. Как сделать так, чтобы футер сдвигался за счёт длины любого из трёх элементов. Если длинее правое или левое меню, то за счёт них, а если длинее контент, то за счёт контента?
Вот код:
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
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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Example</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
<div id = "header"><span>Шапка</span></div>
 <div id="main"> 
  <div id="content"><span>Контент</span><hr>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br></div> 
  <div id="left"><span>Левое меню</span><hr>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  </div> 
  <div id="right"><span>Правое меню</span><hr>
   Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
   Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  
  </div> 
 </div>
<div id="footer"><span>Подвал</span></div>
</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

#main {
  display: flex;
  justify-content: space-between;
  position:relative;
  background: #808080;
}
#header {
  width: 1000px;
  height: 100px;
  background: #C0C0C0;
}
#header span{
  font-size:48px;
}
#left 
{ 
  width:220px;
  background:#FFD800; 
  float:right;
  position:relative; 
}
#left span{
  font-size:32px;
}
 
#content 
{ 
  position:absolute; 
  margin-left:220px; 
  width:560px;
  
} 
 #content span {
  font-size:32px;
 }
#right { 
  width:220px;
  float:left; 
  background:#FFD800;
  position:relative;  
 }
  #right span{
  font-size:32px;
  }
  
 #footer{
  width:1000px;
  height:100px;
  background: #C0C0C0;
}
#footer span {
 font-size:48px;
}
0
Лучшие ответы (1)
Сообщение: #14051340
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 30.11.2019, 14:44
Ответы с готовыми решениями:

Контент налезает на футер
Пытаюсь сделать обычную разметку на HTML5 для обычного двухколоночного макета. Выходит такая штука, что блок с контентом налезает на футер,...

Футер наезжает на контент. Как исправить?
футер наезжает на контент помогите исправить? &lt;footer&gt; &lt;div class=&quot;container&quot;&gt; &lt;div...

Почему ФУТЕР не внизу? И как это исправить?
Почему ФУТЕР не внизу? И как это исправить? * { margin: 0; padding: 0; } html {height: 100%;} body { height: auto...

4
1030 / 682 / 297
Регистрация: 04.04.2013
Сообщений: 2,751
30.11.2019, 17:51
Katerina1993,
CSS
1
2
3
4
5
6
7
8
9

        html{min-height: 100%; position: relative;}
        body{margin: 0;}
        #header{height: 100px; background: #C0C0C0;}
        #main{background: #808080; display: flex; margin-bottom: 100px;}
        #left, #right{flex-basis: 10%; background: #FFD800; min-height: 100px;}
        #left{order: -1;}
        #right{order: 1;}
        #content{flex-basis: 80%;}
        #footer{min-height:100px; width: 100%; background: #C0C0C0; position: absolute; left: 0; bottom: 0}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <div id="header">
 
    </div>
    <div id="main">
        <div id="content">
 
        </div>
        <div id="left">
 
        </div>
        <div id="right">
 
        </div>
    </div>
    <div id="footer">
 
    </div>
1
1 / 0 / 1
Регистрация: 05.02.2019
Сообщений: 56
30.11.2019, 19:37
Попробуйте для #content добавить свойство overflow: hidden;
0
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
01.12.2019, 22:38
Лучший ответ Сообщение было отмечено Katerina1993 как решение

Решение

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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Example</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
<div id = "header"><span>Шапка</span></div>
 <div id="main"> 
  <div id="left"><span>Левое меню</span><hr>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  </div> 
  <div id="content"><span>Контент</span><hr>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br>
  Статья<br></div> 
  
  <div id="right"><span>Правое меню</span><hr>
   Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
   Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  Меню<br>
  
  </div> 
 </div>
<div id="footer"><span>Подвал</span></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

#main {
  display: flex;
  justify-content: space-between;
  position:relative;
  background: #808080;
}
#header {
  width: 100%;
  height: 100px;
  background: #C0C0C0;
}
#header span{
  font-size:48px;
}
#left 
{ 
  width:220px;
  background:#FFD800; 
  float:right;
  position:relative; 
}
#left span{
  font-size:32px;
}
 
#content 
{ 
  width:560px;
  
} 
 #content span {
  font-size:32px;
 }
#right { 
  width:220px;
  float:left; 
  background:#FFD800;
  position:relative;  
 }
  #right span{
  font-size:32px;
  }
  
 #footer{
  width:100%;
  height:100px;
  background: #C0C0C0;
}
#footer span {
 font-size:48px;
}

Не знаю то ли это что вам нужно..так как код у вас аварийный. Сори что не дал ссылку на песочницу
2
403 / 19 / 5
Регистрация: 17.01.2017
Сообщений: 572
03.12.2019, 10:24  [ТС]
Да это то что нужно, спасибо за помощь.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 03.12.2019, 10:24
Помогаю со студенческими работами здесь

Налезает футер на другой блок
Футер налезает примерно на ширине окна 800px http://dev-working.ru/project_23_03_18/laxta-center3.html Пока что не могу ничего придумать...

Смещается футер при переходе на вкладку правила и показать все теги, как это можно исправить?
Всем привет! Возник такой вопрос: Смещается футер при переходе на вкладку правила и показать все теги, как это можно исправить??? скрин: ...

Налезает слайдер на контент relative
Доброго времени суток. имеется такая проблема. Есть слайдер: &lt;div id=&quot;slider-wrap&quot;&gt; &lt;div id=&quot;slider&quot;&gt;...

Контент уходит за футер
Добрый день! Возникла проблема контент уходит за футер при сужении страницы. Помогите решить проблему. HTML &lt;!-- footer --&gt;...

Контент налазит на футер!
Контент сайта налазит на футер! Вот сам пример: lestnica.3dn.ru/photo Как избавиться от этого? И ещё одна большая просьба! Когда...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru