Как прижать футер к низу страницы браузера?

@morda77 · Регистрация: 22.12.2012

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

Вот HTML:

HTML5

<!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=utf-8">
<title>Святогор Реалти</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
 
 
</head>
<body>
 
<div id="wrap"><!-- Контейнер сайта -->
    <div id="header"><!-- Шапка -->
        <div id="vert_menu">
        </div><!-- Конец vert_menu -->
    </div><!-- Конец шапки -->
    <div id="content"><!-- <Блок контента -->
    </div><!-- <Конец блок контента -->
</div><!-- Конец контейнера сайта -->
 
<div id="footer"><!-- Блок футер -->
    <div class="footer"><!-- Класс футер -->
    </div><!-- Конец класса футера -->
</div><!-- Конец блока футера -->
 
 
</body>
</html>

Вот CSS:

CSS

@import url(reset.css);
 
body { /*Фон*/
    background-color: #cccccc;
    margin:0;
    padding:0;
    text-align:center;
    height:100%
}
 
#wrap { /*Область сайта*/
    width: 1260px;
    height: 970px;
    background-color:ffffаа;
    outline: 1px solid #ffffff;
    margin: 0 auto;
 
 } 
 
#header {/*Шапка*/
    margin:0 auto;
    width:1260px;
    height:452px;
    background-image: url(../images/bacground_wrap.jpg);
    background-repeat: no-repeat;
    }
 
#vert_menu{/*Вертикальное меню*/
    
    }  
    
#content {/*Блок контента*/
     
}   
 
 
    
#footer {/*Блок футер*/
    margin:-107px auto 0;
    height:294px;
    width:1260px;
    background-image:url(../images/footer_bacground.jpg);
    background-repeat:no-repeat;
    }   
.footer{/*Класс футер*/
    position:absolute;
    height:291px;
    width:279px;
    background-image:url(../images/class_footer.jpg);
    float:left;
    margin:-140px 0;
    }

Заранее спасибо.

@GreenForest · 09.01.2014, 02:09

morda77, Залей на бесплатный хост и не забивай людям голову.

@morda77 · 09.01.2014, 02:10 **[ТС]**

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

morda77, Залей на бесплатный хост и не забивай людям голову.

Ок. ща залью.

@Sasha001 · 09.01.2014, 02:17

www.rar

@morda77 · 09.01.2014, 02:21 **[ТС]**

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

Вложение 351881

Заменил. Вот что получилось.

@Sasha001 · 09.01.2014, 02:26

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

Заменил. Вот что получилось.

всю папку заменили?

@morda77 · 09.01.2014, 02:27 **[ТС]**

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

всю папку заменили?

Да. Даже старую "удалил" в другое место, на всяк.

@Sasha001 · 09.01.2014, 02:30

morda77, это странно, у меня все корректно отображается

@morda77 · 09.01.2014, 02:34 **[ТС]**

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

morda77, это странно, у меня все корректно отображается

У меня, что в хроме, что в мозиле, одинаково. Денвер даже перезагружал.

@Sasha001 · 09.01.2014, 02:40

morda77, уберите min-height и height у body, не заметил. мб проблема в этом, хотя это навряд ли

@morda77 · 09.01.2014, 02:44 **[ТС]**

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

morda77, уберите min-height и height у body, не заметил. мб проблема в этом, хотя это навряд ли

Убрал. Вообще ничего не изменилось.

@Sasha001 · 09.01.2014, 03:15

morda77,

CSS

body { /*Фон*/
    background-color: #cccccc;
    margin:0;
    text-align:center;
    min-height: 100%;
}
 
#wrap { /*Область сайта*/
    width: 1260px;
    outline: 1px solid #ffffff;
    margin: 0 auto;
 } 
 
#header {/*Шапка*/
    height:452px;
    background-image: url(../images/bacground_wrap.jpg);
    background-repeat: no-repeat;
    }
 
#vert_menu{/*Вертикальное меню*/
    
    }  
    
#content {/*Блок контента*/
     
}   
 
#footer {/*Блок футер*/
    height: 294px;
    position: relative;
    bottom: 0;
    width:1260px;
    background:url(../images/footer_bacground.jpg) no-repeat;
    background-color: #fff;
    margin-top: 100px;
    }   
.footer{/*Класс футер*/
    height:291px;
    width:279px;
    background:url(../images/class_footer.jpg) no-repeat;
    float:left;
    }

@morda77 · 09.01.2014, 03:18 **[ТС]**

Заменил.
Вот результат:

@morda77 · 09.01.2014, 03:26 **[ТС]**

Вот обещанный бесплатный хост: http://morda77.zg5.ru/
Ключи от FTP надо?

@Sasha001 · 09.01.2014, 03:42

morda77, он будет прижат к самому низу после того как будет много контента(если уменьшать экран)

CSS

body { /*Фон*/
    background-color: #cccccc;
    margin:0;
    text-align:center;
    min-height: 100%;
    position: relative;
    padding-bottom: 330px;
}
 
#wrap { /*Область сайта*/
    width: 1260px;
    outline: 1px solid #ffffff;
    margin: 0 auto;
 } 
 
#header {/*Шапка*/
    height:452px;
    background-image: url(../images/bacground_wrap.jpg);
    background-repeat: no-repeat;
    }
 
#vert_menu{/*Вертикальное меню*/
    
    }  
    
#content {/*Блок контента*/
     
}   
 
#footer {/*Блок футер*/
         position: absolute;
         bottom: 0;
    height: 294px;
    width:1260px;
    background:url(../images/footer_bacground.jpg) no-repeat;
    background-color: #fff;
    }   
.footer{/*Класс футер*/
    height:291px;
    width:279px;
    background:url(../images/class_footer.jpg) no-repeat;
    float:left;
    }

@morda77 · 09.01.2014, 03:48 **[ТС]**

Ок. Теперь футер прижет книзу, даже с пустым контентом, но так же он прибит к левой стороне окна. margin ставил в футере, не помогает.

@Sasha001 · 09.01.2014, 03:55

morda77,

CSS

#footer{
    left: 50%;
    margin-left: -630px;
}

@vooduq · 09.01.2014, 04:11

CSS

#footer { 
background: url("http://morda77.zg5.ru/images/footer_bacground.jpg") no-repeat #FFFFFF;
height: 294px;
margin: 0px auto;
width: 1260px;
}

@morda77 · 09.01.2014, 08:40 **[ТС]**

Сместил. Теперь вот думаю, как обратно левую часть блока футер, которая является классом footer внутри блока footer и имеет свой бекраунд имидж, сместить выше, что бы нишние границы и класса и блока футер обе были вровень прижаты книзу страницы.) http://morda77.zg5.ru/

Добавлено через 41 минуту

В общем не то. Прижался книзу почему-то класс футер, а не блок футер.
http://morda77.zg5.ru/

Добавлено через 3 часа 27 минут
В общем, никто так и не дал пока верного ответа.

@vooduq · 09.01.2014, 09:33

а в чем задача

@morda77 · 09.01.2014, 09:36 **[ТС]**

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

а в чем задача

Ну, я уже все по другому сделал, вот по этой схеме
http://www.youtube.com/watch?v=kr6C_oMHrR0
http://www.youtube.com/watch?v=v4zCKsgMYb4

Все с нуля. Все пашет.

Спасибо всем.

@Sasha001 8 / 18 / 0 Регистрация: 08.01.2014 Сообщений: 28
	09.01.2014, 02:17	23
	www.rar 1

@Sasha001 8 / 18 / 0 Регистрация: 08.01.2014 Сообщений: 28
	09.01.2014, 02:26	25
	Сообщение от morda77 Заменил. Вот что получилось. всю папку заменили? 1

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 02:34 [ТС]	28
	Сообщение от Sasha001 morda77, это странно, у меня все корректно отображается У меня, что в хроме, что в мозиле, одинаково. Денвер даже перезагружал. 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 03:18 [ТС]	32
	Заменил. Вот результат: Миниатюры 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 08:40 [ТС]	38
	Сместил. Теперь вот думаю, как обратно левую часть блока футер, которая является классом footer внутри блока footer и имеет свой бекраунд имидж, сместить выше, что бы нишние границы и класса и блока футер обе были вровень прижаты книзу страницы.) http://morda77.zg5.ru/ Добавлено через 41 минуту В общем не то. Прижался книзу почему-то класс футер, а не блок футер. http://morda77.zg5.ru/ Добавлено через 3 часа 27 минут В общем, никто так и не дал пока верного ответа. 0

@GreenForest 50 / 42 / 25 Регистрация: 05.12.2013 Сообщений: 275
	09.01.2014, 02:09	21
	morda77, Залей на бесплатный хост и не забивай людям голову. 1

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 02:10 [ТС]	22
	Сообщение от GreenForest morda77, Залей на бесплатный хост и не забивай людям голову. Ок. ща залью. 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 02:21 [ТС]	24
	Сообщение от Sasha001 Вложение 351881 Заменил. Вот что получилось. Миниатюры 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 02:27 [ТС]	26
	Сообщение от Sasha001 всю папку заменили? Да. Даже старую "удалил" в другое место, на всяк. 0

@Sasha001 8 / 18 / 0 Регистрация: 08.01.2014 Сообщений: 28
	09.01.2014, 02:30	27
	morda77, это странно, у меня все корректно отображается 1

@Sasha001 8 / 18 / 0 Регистрация: 08.01.2014 Сообщений: 28
	09.01.2014, 02:40	29
	morda77, уберите min-height и height у body, не заметил. мб проблема в этом, хотя это навряд ли 1

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 02:44 [ТС]	30
	Сообщение от Sasha001 morda77, уберите min-height и height у body, не заметил. мб проблема в этом, хотя это навряд ли Убрал. Вообще ничего не изменилось. 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 03:26 [ТС]	33
	Вот обещанный бесплатный хост: http://morda77.zg5.ru/ Ключи от FTP надо? 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 03:48 [ТС]	35
	Ок. Теперь футер прижет книзу, даже с пустым контентом, но так же он прибит к левой стороне окна. margin ставил в футере, не помогает. 0

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	09.01.2014, 09:33	39
	а в чем задача 1

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,471
	09.01.2014, 09:36 [ТС]	40
	Сообщение от vooduq а в чем задача Ну, я уже все по другому сделал, вот по этой схеме http://www.youtube.com/watch?v=kr6C_oMHrR0 http://www.youtube.com/watch?v=v4zCKsgMYb4 Все с нуля. Все пашет. Спасибо всем. 0