как прикрепить футер к низу страницы

@vellos · Регистрация: 31.12.2013

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

Всем привет. Подскажите пожалуйста как прикрепить футер к низу страницы, чтобы в случае отсутствия контента, он все равно был снизу. В нете много инфы по этому, но что-то не получается. Сильно не критикуйте, я не спец в этом деле, поэтому и обращаюсь за помощью

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
{headers}
<link href="{THEME}/css/engine.css" rel="stylesheet" type="text/css" />
<link href="{THEME}/styles.css" rel="stylesheet" type="text/css" />
    <link href="{THEME}/css/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="{THEME}/css/js-image-slider.js" type="text/javascript"></script>
        <link href="generic.css" rel="stylesheet" type="text/css" />
 
</head>
<body>
{AJAX}
 <div id="bottombg">
 <div id="wrap">
  <div id="cornerleft"><div id="cornerright">
    <div id="header">
       <a href="/">Мой любимый ГС. Все для ГС, бесплатно</a>
       
       <form id="search" onsubmit="javascript: showBusyLayer()" method="post" action=''>
        <input type="hidden" name="do" value="search" />
        <input type="hidden" name="subaction" value="search" />
        <input class="searchbtn" type="image" src="{THEME}/images/searchbuttom.jpg" alt="Поиск" />
        <div class="header-inpleftbg"><div class="header-inprightbg"><input class="header-search" name="story" value="Что ищем?" onfocus="if (this.value=='Что ищем?') {this.value='';}" onblur="if (this.value=='') {this.value='Что ищем?';}" /></div></div>
       </form>      
    </div> <!-- #header -->
    
    <div id="menu">
       <ul>
        <li id="first"><a class="active" href="/">Главная страница</a></li>
        <li><a href="/index.php?do=register">Новости</a></li>
        <li><a href="/index.php?do=addnews">Видео</a></li>
        <li><a href="/index.php?subaction=newposts">Фото</a></li>
        <li><a href="/index.php?do=stats">Контакты</a></li>
        <li><a href="/?do=lastcomments">Другое</a></li>
       </ul>
    </div> <!-- #menu -->
    
    <div id="container">
    
    {info}
    {content}
    
     </div> <!--#container-->
    
    </div></div> <!-- #bottomcornets -->
    </div> <!-- #wrap -->
    
    <div id="footer">
      <p class="footer14px">Copyright &copy; 2013. Все права защищены и прочая херня =)</div></p>
    </div>
    </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
html{
  height:100%;
}
body {
    font-family: Arial, sans-serif;
    color: #8e8e8e;
    font-size: 12px;
    background: #040400 url(images/topbackground.jpg) no-repeat 50% 0%;
    position:relative;
  min-height:100%;
  height: auto !important;
#wrap{
    width: 100%;
    margin: 0 auto;
    background: #fff; 
}
#container {
    width: 100%;
    height: 100%;
    float: left;
}
#content {
    padding: 18px 275px 10px 275px;
    height: 100%;
}
#footer {
   height: 20px;  
    padding-top: 20px;  
    width: 100%;
    margin: 0 auto;
    bottom:0;
    
}
.footer14px {
position:absolute;
  bottom:0;
  left:0;
  z-index:500;
  width:100%;
  height:30px;
  overflow:hidden;
   color: #fff; 
    font-size: 14px; 
    text-align: center; 
}

@Horhes · 01.01.2014, 05:22

Не понятна роль <div id="bottombg"></div>, который не отображён в стилях.
Если поместить футер в блок <div id="wrap"></div>, как по-моему было бы логичней, можно поробовать добавить в

CSS
1
2
3
4
#footer
{
position: absolute;
}

и

CSS
1
2
3
4
5
html>body #wrap
{ 
 height: auto;
 min-height: 100%;
}

@vellos · 01.01.2014, 15:50 **[ТС]**

не работает

@Horhes · 01.01.2014, 18:17

Короче, надо над разметкой поработать, этот приём работает, наверное, я не совсем корректно указал соответствующий блок.
Вот смотрите, как это работает

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
118
119
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Footer внизу</title>
<style type="text/css">
<!--
html, body
{
 height: 100%;
 margin: 0;
 padding: 0;
 border: none;
}
 
p
{
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 font-size: 11.5pt;
 font-weight: 300;
 color: #003;
 letter-spacing: 0.1;
 text-align: justify;
 line-height: 13.5pt;
 white-space: pre-line;
}
 
p span
{
 font-size: 10pt;
 font-style: oblique;
}
 
h4
{
color: white;
}
 
#wrap
{
 height: 100%;
 margin: 5px 10%;
 padding: 5px;
 position: relative;
 display: block;
 visibility: visible;
}
 
#header
{
 background-color: #9CC;
 height: 60px;
 display: block;
 border-radius: 0 0 15px 15px;
}
 
#main
{
 padding: 40px;
}
 
#footer
{
 background-color:#36B;
 width: 100%;
 height: 50px;
 border: groove #9C9 thin;
 display: block;
 border-radius: 15px 15px 0 0;
 position: absolute;
 bottom: 0px;
}
 
html>body #wrap
{ 
 height: auto;
 min-height: 100%;
}
-->
</style>
</head>
 
<body>
<div id="wrap" align="center">
 
    <div id="header">
         <h4>Здесь располагается содержимое header</h4>
    </div>
    
    <div id="main">
      <div id="content">
        <h3><контент></h3>
        <p>
        <strong>Михаэль Шумахер по-прежнему находится в коме</strong>
        </p>
        <p>Семикратный чемпион "Формулы-1" Михаэль Шумахер, который серьезно пострадал в результате 
падения при катании на горных лыжах, в среду по-прежнему находится в состоянии искусственной комы, 
сообщает агентство Франс Пресс со ссылкой на медиков.
В воскресенье утром, катаясь на лыжах во французском Мерибеле, Шумахер ударился головой о камни. На 
вертолете 44-летний экс-гонщик был доставлен в больницу Мутье (в 15 километрах от места падения), а 
затем в Гренобль. У него — серьезные повреждения головного мозга.
Как отмечает Франс Пресс, врачи пока не могут дать точные прогнозы после экстренных операций.
Врачи накануне сделали Шумахеру вторую операцию, после которой были отмечены некоторые улучшения 
его состояния. Ранее глава отделения реанимации и интенсивной терапии госпиталя Гренобля, куда был 
доставлен Шумахер, сообщил, что знаменитый гонщик находится в критическом состоянии.<br>
<span>РИА Новости http://ria.ru/sport/20140101/987590591.html#ixzz2p9qcYHzR</span>
        </p>
      </div>
    </div>
 
    <div id="footer">
          <h4>Этот блок всегда будет внизу, сколько бы контента не было на странице</h4>
    </div>
 
</div>
</body>
</html>

Добавлено через 18 минут
З.Ы.
<div id="content"> можно убрать, не играет никакой роли

@vellos · 02.01.2014, 00:44 **[ТС]**

большое спасибо) разобрался и все получилось)
ещё раз спасибо за помощь!)

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

@vellos 0 / 0 / 0 Регистрация: 31.12.2013 Сообщений: 3
	01.01.2014, 15:50 [ТС]
	не работает 0

@vellos 0 / 0 / 0 Регистрация: 31.12.2013 Сообщений: 3
	02.01.2014, 00:44 [ТС]
	большое спасибо) разобрался и все получилось) ещё раз спасибо за помощь!) 0