Футер залазит на контент, если уменьшить высоту окна браузера

@lawliet93 · Регистрация: 22.03.2011

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

Прив. Хочу сделать, чтобы футер был всегда внизу, если конента на страничке мало, и сама страница полностью влазит в окно и не появляется полоса прокрутки. А если контента много и страничка не влазит в окно браузера, то футер должен отъезжать вниз и его не должно быть видно, если не прокрутить полосу прокрутки до него. А у меня смотрите как, если контента мало и страница помещается в окне, то футер внизу, как и нужно, но если уменьшить окно браузера, то футер залазит на контент, а не остается внизу. Почему так?

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="menu">
        <ul>
            <li><a href="">Элемент меню 1</a></li>
            <li><a href="">Элемент меню 2</a></li>
            <li><a href="">Элемент меню 3</a></li>
            <li><a href="">Элемент меню 4</a></li>
            <li><a href="">Элемент меню 5</a></li>
            <li><a href="">Элемент меню 6</a></li>
            <li><a href="">Элемент меню 7</a></li>
            <li><a href="">Элемент меню 8</a></li>
            <li><a href="">Элемент меню 9</a></li>
            <li><a href="">Элемент меню 10</a></li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
    </div>
    <div id="footer">footer</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
body {
    background: url(http://subtlepatterns.com/patterns/ricepaper_v3.png) #ddd;
    font-family: Tahoma;
    margin: 0;
    height: 100%;
}
 
html {
    height: 100%;
    margin: 0px;
}
 
#wrapper {
    width: 650px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background: #f2f2f2;
    padding: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    margin-bottom: 0;
    min-height: 100%;
    height: auto;
    margin-bottom: 0px;
    border-radius: 10px;
    overflow: hidden;
}
 
#header {
    background: url(http://research.nodebox.net/data/media/header.jpg);
    width: inherit;
    height: 150px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}
 
#menu{
    float: left;
    width: 150px;
    font-size: 12px;
    position: absolute;
    left :0;
}
#menu ul {
padding-left: 20px;
margin-right: 10px;
}
 
#menu a {
color: #fff3da;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
 
#menu li{
    background: -webkit-radial-gradient(black ,gray);
    margin-bottom: 5px;
    width: auto;
    list-style: none;
    height: 20px;
    border-radius: 5px;
}
 
#content {
    width: auto;
    margin-left: 150px;
    min-height: auto;
    height: auto;
    border-left: 3px dashed #ddd;
    padding-left: 10px;
    padding-right: 10px;
}
p {
    text-indent: 10px;
}
p:first-letter {
    color: red;
}
 
#footer {
    position: absolute;
    bottom: 0;
    width: inherit;
    height: 100px;
    background: #ccc;
    text-align: center;
}

@Temirkhan · 27.10.2013, 01:34

Когда верстал свою первую страницу с css и html, столкнулся с подобной проблемой. После нудных поисков по буржуазным сайтам нашел решение. Класс так и назвал solution ))

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div.solution{
    
    width: 100%;
    height: 1%;
    position: relative;
}
#content {
    padding: 0 0 0 200px;
}
div.solution:after{
   content: '';
    clear: both;
    display: table;
}

Открывается там, куда футер вылезает, и
закрывается перед футером. Вроде помогает.

@lawliet93 · 27.10.2013, 02:00 **[ТС]**

ну я не понял, куда его пихать, запихнул сначала между контентом и футером - ничего не изменилось, потом запихнул контент в солюшн, тоже ничего не изменилось.

@Temirkhan · 27.10.2013, 02:09

Сообщение от lawliet93

ну я не понял, куда его пихать, запихнул сначала между контентом и футером - ничего не изменилось, потом запихнул контент в солюшн, тоже ничего не изменилось.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<body>
<div class="solution">
...
...
...
...
...
 
</div><!--Здесь закрываем-->
<div id="footer">
...
...

@lawliet93 · 27.10.2013, 02:17 **[ТС]**

дык header, content, menu и footer находятся в div'e с id wrapper. Я открыл solution сразу после wrapper и закрыл перед footer, но ничо не изменилося =(

@Temirkhan · 27.10.2013, 02:35

если у тебя уже определен content, доопредели его новыми данными. ОТКРОЙ solution ДО wrapper и закрой уже хоть до, хоть после footer

Добавлено через 10 минут
А, вообще, если у тебя сайт будет такой же сложности, думаю, хватит просто вписать необходимый отступ от контента снизу. просто добавь в #content поле padding-bottom:300px;

@lawliet93 · 27.10.2013, 02:40 **[ТС]**

ну ты даешь, ты хоть бы сам взял тот код, который в первом сообщении да проверил бы свои советы, а-то ты мне 100 раз советуешь - я 100 раз делаю и ниче не получается. В итоге я просто увеличил минимальную высоту блока content и все.

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. 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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@lawliet93 17 / 5 / 3 Регистрация: 22.03.2011 Сообщений: 329
	27.10.2013, 02:00 [ТС]
	ну я не понял, куда его пихать, запихнул сначала между контентом и футером - ничего не изменилось, потом запихнул контент в солюшн, тоже ничего не изменилось. 0

@lawliet93 17 / 5 / 3 Регистрация: 22.03.2011 Сообщений: 329
	27.10.2013, 02:17 [ТС]
	дык header, content, menu и footer находятся в div'e с id wrapper. Я открыл solution сразу после wrapper и закрыл перед footer, но ничо не изменилося =( 0

@Temirkhan 0 / 0 / 0 Регистрация: 27.10.2013 Сообщений: 4
	27.10.2013, 02:35
	если у тебя уже определен content, доопредели его новыми данными. ОТКРОЙ solution ДО wrapper и закрой уже хоть до, хоть после footer Добавлено через 10 минут А, вообще, если у тебя сайт будет такой же сложности, думаю, хватит просто вписать необходимый отступ от контента снизу. просто добавь в #content поле padding-bottom:300px; 0

@lawliet93 17 / 5 / 3 Регистрация: 22.03.2011 Сообщений: 329
	27.10.2013, 02:40 [ТС]
	ну ты даешь, ты хоть бы сам взял тот код, который в первом сообщении да проверил бы свои советы, а-то ты мне 100 раз советуешь - я 100 раз делаю и ниче не получается. В итоге я просто увеличил минимальную высоту блока content и все. 0