Как закрепить footer внизу

RAZORG1991

Захожу иногда
349
6 / 0

Как закрепить footer внизу

« : 29.07.2012, 23:43:18 »

Ребята, догадываюсь что данная тема наверное уже перетиралась много раз, но все же помогите. Как этот долбаный подвал закрепить внизу страницы при малом кол-ве контента?

Вот код index.php

Код

<!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=utf-8" />
<title>Saytostroy</title>
<link rel="stylesheet" type="text/css" href="css/template.css"/>
</head>
<body>
<div id="body">
 <div id="contenyer">
  <div id="header">header</div>
  <div id="menu">menu</div>
  <div id="slider">slider</div>
  <div id="dop_content">
    <div id="content_1">content_1</div>
    <div id="content_2">content_2</div>
    <div id="content_4">content_4</div>
    <div id="content_3">content_3</div>
  </div>
  <div id="main_content">main_content</div>
 </div>
 <div id="footer">footer</div>
</div>
</body>
</html>

А вот код template.css

Код

html, body{
	margin:0px;
	padding:0px;
	background:url(../images/121.jpg) repeat;
	height:100%;
	position:relative;
}
#body{
	margin:0 auto;
	padding:0px;
	width:980px;
	min-height:100%;
}
#contenyer{
	margin:0px;
	padding:0px;
	padding-bottom:50px;
	width:980px;
	min-height:200px;
}
#header{
	margin:0 auto;
	padding:0px;
	background:#03F;
	width:980px;
	height:80px;
}
#menu{
	margin:0 auto;
	padding:0px;
	background:#C03;
	margin-top:10px;
	width:980px;
	height:50px;
	border-radius:10px;
}
#slider{
	margin:0 auto;
	padding:0px;
	background:#CC0;
	margin-top:20px;
	border-radius:15px;
	width:980px;
	height:50px;
}
#dop_content{
	margin:0 auto;
	padding:0px;
	margin-top:30px;
	width:980px;
	height:300px;
}
#content_1{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	float:left;
	background:#300;
	border-radius:10px;
	margin-top:20px;
}
#content_2{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	background:#C60;
	border-radius:10px;
	margin-top:20px;
	margin-left:60px;
	float:left;
}
#content_3{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	border-radius:10px;
	margin-top:20px;
	float:right;
	background:#93F;
}
#content_4{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	border-radius:10px;
	margin-top:20px;
	background:#FF6;
	float:right;
	margin-left:60px;
}
#main_content{
	margin:0px;
	padding:0px;
	width:980px;
	min-height:100px;
	border-radius:20px;
	margin-top:20px;
	background:#903;
}
#footer{
	margin:0px;
	padding:0px;
	width:980px;
	height:50px;
	background:#90F;
}

Может я что-то не улавливаю или где-то ошибся? Можете помочь

Записан

dmarcalec

Осваиваюсь на форуме
20
1 / 0

Re: Как закрепить footer внизу

« Ответ #1 : 30.07.2012, 00:00:00 »

а у вас он где размещается? ссылку на сайт или скриншот приложите. обычно проблемы связаны с обтеканием.

Записан

RAZORG1991

Захожу иногда
349
6 / 0

Re: Как закрепить footer внизу

« Ответ #2 : 30.07.2012, 11:08:31 »

« Последнее редактирование: 30.07.2012, 12:21:52 от RAZORG1991 »

Записан

dmarcalec

Осваиваюсь на форуме
20
1 / 0

Re: Как закрепить footer внизу

« Ответ #3 : 30.07.2012, 14:47:23 »

не совсем понятно зачем вы в каждом селекторе повторяете одни и те же свойства. Но т.к. вопрос заключался в другом будем его обсуждать. У вас высота в body стоит 100%. 100% это высота экрана. К ним еще добавляется высота футера и соответственно появляется скролл. По-моему так.

Записан

RAZORG1991

Захожу иногда
349
6 / 0

Re: Как закрепить footer внизу

« Ответ #4 : 30.07.2012, 14:59:44 »

Цитата: dmarcalec от 30.07.2012, 14:47:23

не совсем понятно зачем вы в каждом селекторе повторяете одни и те же свойства. Но т.к. вопрос заключался в другом будем его обсуждать. У вас высота в body стоит 100%. 100% это высота экрана. К ним еще добавляется высота футера и соответственно появляется скролл. По-моему так.

Да оно все так, но когда допустим, в футере ставлю 5%, а в контейнере 95%, все равно скролл никуда не уходит. А сам идентификатор боди содержит в себе и футер и контейнер, и также имеет 100%. Но почему-то скрол все-равно остается(((

Записан

dmarcalec

Осваиваюсь на форуме
20
1 / 0

Re: Как закрепить footer внизу

« Ответ #5 : 31.07.2012, 00:31:40 »

попробуйте все же убрать минимальную высоту с contenyer

Записан

RAZORG1991

Захожу иногда
349
6 / 0

Re: Как закрепить footer внизу

« Ответ #6 : 31.07.2012, 13:50:11 »

Все выход найден))))

php остался такой же, а вот с темплейтом поколдовал)))) Испробовал во всех браузерах - РАБОТАЕТ))))

Код

html, body{
	margin:0px;
	padding:0px;
	background:url(../images/121.jpg) repeat;
	background-attachment:fixed;
	height:100%;
}
#body{
	margin:0 auto;
	padding:0px;
	height:100%;
	width:980px;
}
#contenyer{
	margin:0px;
	padding:0px;
	padding-bottom:5%;
	width:980px;
	min-height:95%;
}
#header{
	margin:0;
	padding:0px;
	background:#03F;
	width:980px;
	min-height:80px;
}
#menu{
	margin:0;
	padding:0px;
	background:#C03;
	margin-top:10px;
	width:980px;
	height:50px;
	border-radius:10px;
}
#slider{
	margin:0;
	padding:0px;
	background:#CC0;
	margin-top:20px;
	border-radius:15px;
	width:980px;
	height:150px;
}
#dop_content{
	margin:0;
	padding:0px;
	margin-top:30px;
	width:980px;
	height:300px;
}
#content_1{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	float:left;
	background:#300;
	border-radius:10px;
	margin-top:20px;
}
#content_2{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	background:#C60;
	border-radius:10px;
	margin-top:20px;
	margin-left:60px;
	float:left;
}
#content_3{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	border-radius:10px;
	margin-top:20px;
	float:right;
	background:#93F;
}
#content_4{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	border-radius:10px;
	margin-top:20px;
	background:#FF6;
	float:right;
	margin-left:60px;
}
#main_content{
	margin:0px;
	padding:0px;
	width:980px;
	min-height:150px;
	border-radius:20px;
	margin-top:20px;
	background:#903;
}
#footer{
	margin:0px;
	margin-top:-5%;
	padding:0px;
	width:980px;
	height:5%;
	background:#90F;
}

Вот скрин

Скрол чуточку есть, но там практически прокрутки нету)))

Записан

Как убрать белую полосу внизу страницы при масштабировании в телефонах? Автор Donec2009	Ответов: 2 Просмотров: 2693	05.03.2015, 00:10:11 от Donec2009
Добрый день друзья SJ_Resorts_J25, как в этом шаблоне поменять footer Автор Артём 2014	Ответов: 0 Просмотров: 1341	17.10.2014, 17:10:34 от Артём 2014
Как прикрепить footer к низу страницы, когда отсутствует контент? Автор neocraft	Ответов: 15 Просмотров: 14700	15.04.2014, 22:21:17 от yuranltd
footer сайта не фиксируется на месте Автор almakaz	Ответов: 2 Просмотров: 1377	18.03.2014, 10:10:14 от Mesuti
Как убрать логотип шаблона в footer'e? Автор Outja	Ответов: 2 Просмотров: 1807	17.03.2014, 11:03:33 от юрий 009

Как закрепить footer внизу - Joomla 2.5: Шаблоны, разметка и макеты вывода

Новости Joomla

Вышли релизы безопасности Joomla 6.1.1 и Joomla 5.4.6

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

👩‍💻 SM WT CDEK аддон доставки для JoomShopping.

RAZORG1991

Как закрепить footer внизу

dmarcalec

Re: Как закрепить footer внизу

RAZORG1991

Re: Как закрепить footer внизу

dmarcalec

Re: Как закрепить footer внизу

RAZORG1991

Re: Как закрепить footer внизу

dmarcalec

Re: Как закрепить footer внизу

RAZORG1991

Re: Как закрепить footer внизу

Похожие темы