Не получается прижать футер к низу экрана

@steve09 · Регистрация: 26.04.2009

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

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Студия веб-дизайна. Создание, продвижение сайтов</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!??[if lt IE 7]>
 
<script type="text/javascript">
document.getElementById('elemId').style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/header.png', sizingMethod='scale')";
</script>
 
<![endif]??>
</head>
 
<body>
 
<div id="container">
 
<div id="header-out">
<div id="header">
 
<div class="logo">
<div class="descrip">Создание и продвижение веб-сайтов</div>
</div>
 
<div class="phonedaynight">
<div class="our_phone">Наш телефон</div>
<div class="daynight">Круглосуточно</div>
</div>
 
</div>
</div>
 
<div id="menu">МЕНЮ МЕНЮ МЕНЮ МЕНЮ МЕНЮ МЕНЮ МЕНЮ МЕНЮ </div>
 
<div id="leftsidebar"> LEFT SIDEBAR </div>
<div id="content"> CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
<div class="hFooter"></div> 
</div>
 
<div id="clear"></div>
 
<div id="footer-out">
 
<div id="footer"></div>
 
</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
@charset "windows-1251";
/* CSS Document */
 
body, html 
{
    margin:0px;
    padding:0px;
    text-align:center;
    color:#fff;
    height:100%;
}
    
#container
{
    margin: 0 auto;
    text-align:left;
}
 
#header-out
{
    height:167px;
    background-image:url(images/h-bg.jpg);
    margin:0 auto;
}
 
#header
{
    width:1000px;
    margin:0 auto;
    height: 167px;
    background:url(images/header.png) no-repeat;
        
}
 
.logo {width:350px;float:left;padding:83px 0 0 155px;font-size : 14px; font-family:Arial, Helvetica, sans-serif;}
 
.logo .desc {font-size:13px; color:#fff;}
 
.phonedaynight {float:left; padding:32px 0 0 0px;color:#B5CDF3;font-size:11px;}
 
 
 
.our_phone 
{
    margin:3px 0 0 130px;
    color:#fff;
    font-family:Arial;
    font-size:14px;
    float:left;
}
        
.daynight 
{
    margin:3px 0 0 335px;
    color:#fff;
    font-family:Arial;
    font-size:14px;
}
 
#menu
{
    height:40px;
    background:url(images/menu.jpg) no-repeat;
    margin: 0px 140px;
    
}
 
#leftsidebar
{
    background-color: #399;
    width: 190px;
    float: left;
}
 
 
 
 
#content
{
    background-color: #39F;
    margin-left: 192px;
    min-height:100%;
}
 
.hFooter 
{ /* это распорка в основном блоке - резервируем место для подвала */ 
height: 80px; /* высота нашего подвала */ 
} 
 
/*#clear
{
    clear:both;
    height:0px;
    font-size:1px;
    line-height:0px;
}*/
 
#footer-out
{
    width: 100%;
    height: 80px;
    background-image:url(images/f-bg.jpg); 
    margin-top: -80px;
    
}
 
#footer
{
        width:1000px;
    height:80px;
    background: url(images/footer.png) no-repeat;
    margin: 0px 140px;
}

@4umYOUser · 13.02.2011, 18:51

все намного проще
если футер должен быть после всего другого на странице, тогда все другое ставишь в контейнер, а под ним футер
а если футер должен быть всегда внизу экрана даже при скролинге страницы, тогда указываешь ему:

CSS
1
2
position:fixed;
bottom:0;

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .