Компьютерный форум NoWa.cc Здесь может быть Ваша реклама
Правила Форума
редакция от 22.06.2020
Портал .::2BakSa.WS::.
Вернуться   Компьютерный форум NoWa.cc > В помощь вебмастеру > Веб - Программирование > HTML
Перезагрузить страницу Как прижать футер к дну окна?
Регистрация Правила форума Пользователи Календарь

Уважаемые пользователи nowa.cc и 2baksa.ws. У нас сложилось тяжёлое финансовое положение. Мы работаем для вас вот уже более 15 лет и сейчас вынуждены просить о помощи. Окажите посильную поддержку проектам. Мы очень надеемся на вас. Реквизиты для переводов ниже.
Webmoney Webmoney WMZ: 826074280762 Webmoney WME: 804621616710
PayPal PayPal_Email E-mail для связи по вопросу помощи
Кошелёк для вашей помощи YooMoney 4100117770549562
YooMoney Спасибо за поддержку!
Ответ
 
Опции темы Опции просмотра Language
Старый 12.05.2011, 13:19   #1
Неактивный пользователь
 
Аватар для Ночной лис
 
Пол:Мужской
Регистрация: 01.02.2009
Адрес: Россия, Тула
Сообщений: 53
Репутация: 2
По умолчанию Как прижать футер к дну окна?
Собственно сабж. Я перековырял кучу способов в сети, пробовал разное, но ничего не помогает. Футер отлично прижимается ко дну контента, но не ко дну окна. Если контента больше или равно 100% высоте окна - выглядит как надо, а если меньше - приклеивается к контенту, поднимаясь от нижней границы окна (делается на uCoz) Привожу пример CSS и самого кода:
Цитата:
Сообщение от CSS
Код HTML:
/* Reset styles �*/

div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th {
	margin:0;
	padding:0;
	border:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	line-height:1;
	font-family:inherit;
}

html, body {
        height;100%;
        margin:0;
}

html>body {
        min-height:100%;
        height:auto;
}

body {
        position:relative;
}

td {
       margin:5;
}

p {
        font-size: 11pt;
        margin: 5px;
}

a img, :link img, :visited img {
	border:0;
        text-decoration:none;
}

#logtbl {
        margin-top: 6px;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

ol, ul {
	list-style:none;
}

q:before, q:after, blockquote:before, blockquote:after {
	content:"";
}

/* ����� ����� */

body {
	font:0.7em Verdana;
	color:#898989;
	background:#FDF8DA url("../images/header-bg.jpg") repeat-x top;
        height:100%;
}

a {
	color:#98BA11;
	text-decoration:underline;
}

a:hover {
	text-decoration:underline;
        font-weight:bold;
}

/* ��������� */

h1 {
	color:#F14D83;
	font-size:1.7em;
	padding:5px 0;
	font-weight:normal;
}

h2 {
	background:url("../images/h2.gif") no-repeat;
	color:#F26D7D;
	font:1.2em Arial;
	font-weight:bold;
	line-height:33px;
	padding:0 20px 0 15px;
	margin:0 -10px 10px;
}

/* �������� ���� */

.textbox {
	border:1px solid #999;
	background:#fff;
	font:1em Verdana;
}

.button {
	background:#fff;
	border:1px solid #999;
	font:1em Verdana;
	height:17px;
	vertical-align:top;
	color:#1CBBB4;
}

textarea {
	background:#eee;
}

/* ��������� ����� */

#wrapper {
	background:url("../images/header-left.jpg") no-repeat left top;
	min-width:100%;
        height: auto !important;
        height: 100%;
	position:relative;
}

#container {
	width:100%;
	float:left;
	margin-right:-250px;
}

#content {
	margin-right:250px;
}

/* ����� */

#header {
	height:236px;
	background:url("../images/header-right.jpg") no-repeat right top;
}

.logo {
	position:absolute;
	left:35px;
	top:20px;
}

.nav {
	float:left;
	overflow:hidden;
	position:absolute;
	top:15px;
	left:400px;
}

.nav li {
	float:left;
	padding:0 10px;
	border-right:1px solid #00AEEF;
	margin-right:-1px;
	padding-bottom:2px;
}

.nav li a {
	color:#00AEEF;
	text-decoration:underline;
	font-weight:bold;
	font-family:Arial;
}

.nav li a:hover {
	text-decoration:none;
}

/* ����� */

.searchbox {
	position:absolute;
	top:10px;
	right:0;
	font:1em Verdana;
}

.searchbox .button {
	border:1px solid #fff;
}

.searchbox .textbox {
	width:100px;
}

/* ������ ���������� */

#userbar {
	background:#26B9EA url("../images/userbar-left.gif") no-repeat left top;
	position:relative;
	top:108px;
	margin:0 12px;
	color:#fff;
}

#userbar .inside1 {
	background:url("../images/userbar-right.gif") no-repeat right top;
	height:31px;
	padding:0 20px;
}

#userbar span {
	line-height:31px;
	font-size:1.2em;
	font-weight:bold;
}

.login {
	float:right;
	padding:6px 0 0 0;
}

.login .textbox {
	background:#6DD0F4;
	width:100px;
	border-color:#64C1E3;
	color:#fff;
}

.login .button {
	background:#F4F2E7;
}

.login a {
	color:#fff;
	text-decoration:underline;
}

.login a:hover {
	text-decoration:none;
}

.cp {
	float:right;
	width:600px;
	padding:2px 0 0;
}

.cp li {
	float:left;
	width:150px;
	padding-bottom:1px;
}

.cp a {
	color:#fff;
}

/* ���� */

#menu {
	background:url("../images/menu-right.jpg") no-repeat right bottom;
	position:relative;
	top:108px;
	margin:0 12px;
}

#menu .inside1 {
	background:url("../images/menu-left.jpg") no-repeat left bottom;
	padding-bottom:7px;
}

#menu .inside2 {
	background:#FDF1AF;
	height:80px;
	padding:5px 20px;
}

/* ����� ��� dd-���� */

.main-menu {
	text-align:center;
	width:100%;
}

.extra-menu {
	margin-right:200px;
	background:#C5DB77 url("../images/extra-menu-right.gif") no-repeat right top;
	float:left;
	padding:0 5px 0 0;
}

.shadetabs {
	overflow:hidden;
}

.shadetabs li {
	float:left;
	text-align:center;
	width:9%;
}

.shadetabs li a {
	text-decoration:none;
	font-size:1.2em;
	font-weight:bold;
	display:block;
	padding:2px 3px;
	text-align:center;
	color:#8DC63F;
}

.shadetabs li a.selected { 
	color:#D85565;
}

.shadetabs li a.selected:hover { 
	color:#D85565;
}

.tabcontent {
	display:none;
	overflow:hidden;
	padding:2px 0 2px 5px;
	float:left;
	background:url("../images/extra-menu-left.gif") no-repeat left top;
}

.tabcontent li {
	float:left;
	margin-right:-1px;
	padding:0 7px 2px;
	border-right:1px solid #707070;
}

.tabcontent li a {
	color:#707070;
	text-decoration:underline;
	font-weight:normal;
	font-size:0.8em;
}

.tabcontent li a:hover {
	text-decoration:none;
}

/* ����������� ������� */

#main {
	margin-left:250px;
}

.news {
	background:#fff url("../images/news-bg.gif") no-repeat top right;
	padding:0 6px 10px;
	overflow:hidden;
}

.news p {
	margin-bottom:8px;
	line-height:13px;
}

.news .postheader {
	font-size:0.9em;
	margin-bottom:10px;
}

.news .postheader img {
	margin:0;
	vertical-align:baseline;
}

.news img {
	margin:0 5px;
}

.date {
	background:url("../images/date-left.gif") no-repeat left top;
	padding-left:7px;
	color:#88B536;
	font-size:1.2em;
	font-weight:bold;
	overflow:hidden;
	margin-left:3px;
}

.date span {
	display:block;
	line-height:20px;
	background:#fff url("../images/date-right.gif") no-repeat top right;
	padding-right:7px;
	float:left;
}

.afternews {
	padding:3px 10px;
	margin-bottom:15px;
	overflow:hidden;
}

.afternews a {
	color:#00AEEF;
	font-size:1.2em;
	font-weight:bold;
	float:left;
	display:block;
	margin-right:20px;
	line-height:19px;
}

.download a {
	background:url("../images/download.gif") no-repeat left top;
	line-height:19px;
	padding-left:25px;
}

.comments a {
	line-height:19px;
	background:url("../images/comments.gif") no-repeat left top;
	padding-left:25px;
}

.rating {
	float:right;
}

/* ������� ���� */

.block {
	background:url("../images/block.gif") no-repeat right bottom;
	padding:0 5px 4px 0;
	margin-bottom:15px;
}

.block dd {
	background:#FEFBE9;
	min-height:90px;
	padding:0 10px 10px;
}

/* ����� ������� */

#left {
	width:235px;
	padding:0 5px 0 10px;
	float:left;
}

#left a {
	color:#4F9AAE;
}

/* ������ ������� */

#sidebar {
	width:235px;
	padding:60px 10px 0 5px;
	float:right;
}

#sidebar .block {
	background:url("../images/block-right.gif") no-repeat left bottom;
	padding:0 0 4px 5px;
}

.counter-block {
	text-align:center;
}

.counter-block img {
	margin-bottom:5px;
}

/* ������ */

#footer {
	height:71px;
	background:#0CAACA url("../images/footer.jpg") no-repeat right top;
	margin:40px 0 0;
	position:relative;
        bottom:0;
}

.copyright-block {
	background:#fff url("../images/copyright.gif") repeat-x top;
	padding:10px 30px;
	position:absolute;
	left:50px;
	top:-20px;
	text-align:center;
}

.copyright-block span {
	color:#00AEEF;
	font-size:1.2em;
	font-weight:bold;
	line-height:20px;
}

.copyright-block a {
	color:#ED145B;
	font-size:1.2em;
}

.count-block {
        margin: 0px 1000px;
        padding: 20px;
}

.girl {
	position:absolute;
	width:240px;
	height:158px;
	top:132px;
	right:10px;
	background:url("../images/girl.png") no-repeat;
}

.clearing {
	height:0;
	clear:both;
	font-size:0;
	overflow:hidden;
}

/* ������������� ��������� */

.navigation {
	color:#666; 
	border:0px;
}

.navigation a {
	text-decoration:none;
	color:#636363;
	background:#F9F9F9;
	border:1px solid #E6E6E6;
	padding:3px 6px;
	font-size:11px
}

.navigation a:hover {
	background:#F6580C;
	color:#FFFFFF;
	border-color:#E6E6E6;
}

.navigation span {
	text-decoration:none;
	background:#fff;
	padding:3px 6px;
	border:1px solid #999;
	color:#999;
	font-size:11px;
}

/* ���������� ������������ */

.addcomment {
	width:462px;
	border-collapse:separate;
	margin-bottom:10px;
	vertical-align:top;
	text-align:left;
}

.addcomment th {
	padding:4px;
	background:#FEFBE9;
	color:#333;
	text-align:center;
	font-weight:bold;
}

.addcomment textarea {
	width:100%;
	border:none;
	height:100px;
}

.commentform {
	line-height:25px;
	width:24%;
}

.center {
	text-align:center;
	width:100%;
}

.center .addcomment {
	margin:0 auto 5px;
	border:1px solid #ccc;
}

/* ����� ��� ������������ */

.answer {
	width:100%;
	margin:10px 0;
	border-collapse:separate;
}

.answer td {
	padding:0;
}

.answer th {
	background:#FEFBE9;
	color:#333;
	font-weight:normal;
	padding:4px;
	text-align:left;
}

.answer th a {
	color:#333;
	text-decoration:underline;
	font-weight:bold;
}

.answer .comment_user_info {
	background:#eee;
	width:20%;
	padding:5px;
	font-size:0.9em;
	vertical-align:top;
}

.answer .user_comment {
	background:#f9f9f9;
	padding:5px 10px;
	vertical-align:top;
}

.comment_bottom td {
	background:#FEFBE9;
	padding:3px 5px;
	color:#333;
	font-size:0.9em;
}

.comment_bottom td a {
	color:#333;
	text-decoration:underline;
}

.comment_bottom td a:hover {
	text-decoration:none;
}

.right_bottom {
	float:right;
}

/* ���������� ������� */

.addnews {
}

.addnews td {
	padding:3px;
}

.addnews textarea {
	width:100%;
	height:100px;
}

.addnews .textbox {
	width:200px;
}

/* �������� ����� */

.feedback {
	width:98%;
}

.feedback td {
	padding:3px;
}

.feedback textarea {
	width:100%;
	height:100px;
}

/* �������������� �������� ������ */

.lostpassword td {
	padding:3px;
}

/* ������������ ��������� */

.pm {
	border-collapse:separate;
	width:462px;
}

.pm td {
	padding:3px;
}

.pm textarea {
	width:100%;
	border:0;
	height:100px;
}

/* ����������� */

.registration td{
	padding:5px;
}

.registration .button1 {
	margin-bottom:0;
}

.registration .textbox {
	width:150px;
}

/* ���������� � ������������ */

.userinfo {
	width:98%;
	margin-bottom:10px;
}

.userinfo td {
	padding:3px;
	vertical-align:top;
}

.userinfo textarea {
	width:100%;
	height:80px;
}

.userinfo .textbox {
	width:200px;
}

/* ���������� */

.stats {
	border-collapse:separate;
	margin-bottom:10px;
	width:98%;
}

.stats td {
	vertical-align:top;
	padding:3px;
}
#hintbox {
text-align : left;
width : 150px;
font-size : 10px;
border : 1px solid #99a1ab;
background-color : #fff;
layer-background-color : #a396d9;
color : #282828;
margin : 10px 0 0 10px;
padding : 3px 5px;
position : absolute;
visibility : hidden;
z-index : 998;
-moz-opacity : 0.9;
-moz-border-radius : 5px;
filter : alpha(opacity="90");
}

Цитата:
Сообщение от Страницы сайта
Код HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<link rel="stylesheet" href="/css/engine.css" type="text/css" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="/css/ie.css" media="all"/><![endif]-->
<script type="text/javascript" src="/css/tabcontent.js"></script>
 
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>


</head>

<body style="margin:0;padding:0;">

$ADMIN_BAR$

$GLOBAL_AHEADER$

<!-- <middle> -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding:0px">

$GLOBAL_CLEFTER$
</td>

<td valign="top" width="80%" style="padding-top:5px">
<table border="0" cellpadding="10" cellspacing="0" width="100%" style="border:1px solid #D7D7D7;"><tr><td style="background:#F8F8F8;"><!-- <body> -->$CONTENT$<!-- </body> --></td></tr></table>
</td>

<td valign="top" style="padding:7px">
$GLOBAL_DRIGHTER$

</td>
</tr>
</table>
<!-- </middle> -->

$GLOBAL_BFOOTER$

</body>

</html>

Цитата:
Сообщение от код футера
Код HTML:
<div id="footer">
 <div class="copyright-block">
 <span>Copyright ООО &copy; 2007-$YEAR$</span><br />
 Оффициальный сайт ООО <a href="***">***</a><br />
 Интернет-магазин ООО <a href="***">***</a><br />
 $POWERED_BY$
 </div>
 <div class="count-block">$COUNTER$</div>
</div>

Ночной лис вне форума
  		Ответить с цитированием Вверх
Здесь может быть Ваша реклама
Здесь может быть Ваша реклама


Реклама: Магазин компьютерной техники КНС предлагает широкоформатный принтер купить - более 50-ти тысяч наименований товаров со склада в МосквеОтличное предложение в КНС Нева - роутер wi fi - доставкой по Санкт-Петербургу и СЗАОвставка кассетная фильтрующаякруизы в россииConecte LINE a Zoho Books


Старый 12.05.2011, 19:51   #2
zss
Постоялец
 
Пол:Мужской
Регистрация: 05.02.2007
Адрес: Москва
Сообщений: 662
Репутация: 271
По умолчанию Re: Как прижать футер к дну окна?
Попробуйте
1 способ: у css элемента #footer
установить position:absolute;top:90%;left:0
2 способ (кондовый): все, что внутри body заключить в таблицу
с ячейкой у которой height="100%"
__________________
Сергей Сергеевич
Последний раз редактировалось zss; 12.05.2011 в 19:56..
zss вне форума
  		Ответить с цитированием Вверх
Старый 13.05.2011, 08:26   #3
Ночной лис
Неактивный пользователь
 
Аватар для Ночной лис
 
Пол:Мужской
Регистрация: 01.02.2009
Адрес: Россия, Тула
Сообщений: 53
Репутация: 2
По умолчанию Re: Как прижать футер к дну окна?
Цитата:
Сообщение от zss Посмотреть сообщение
Попробуйте
1 способ: у css элемента #footer
установить position:absolute;top:90%;left:0
2 способ (кондовый): все, что внутри body заключить в таблицу
с ячейкой у которой height="100%"

1. position:absolute - пропадает футер вообще, остается внутренний блок Копирайта, причем не верного размера (кстати уже пробовал)
2. сделал класс #ALL c height="100%" и залепил на BODY - <body id="all"> никакого толку (((
Ночной лис вне форума
  		Ответить с цитированием Вверх
Старый 14.05.2011, 13:38   #4
zss
Постоялец
 
Пол:Мужской
Регистрация: 05.02.2007
Адрес: Москва
Сообщений: 662
Репутация: 271
По умолчанию Re: Как прижать футер к дну окна?
Цитата:
Сообщение от Ночной лис Посмотреть сообщение
сделал класс #ALL c height="100%" и залепил на BODY - <body id="all"> никакого толку (((

height="100% действует только для таблиц.
Код:
<body>
<table border="0">
<tr>
<td width="100%" height="100%">
..............................................
</td>
</tr>
</table>
</body>
__________________
Сергей Сергеевич
zss вне форума
  		Ответить с цитированием Вверх
Старый 14.06.2011, 23:58   #5
mogu80
Неактивный пользователь
 
Пол:Мужской
Регистрация: 14.06.2011
Сообщений: 2
Репутация: 1
По умолчанию Re: Как прижать футер к дну окна?
Попробуйте сделать таблицу и вставте блок $GLOBAL_BFOOTER$ в неё. В стиле к таблице используте отступы например style="padding: (сверху)px (справа)px (снизу)px (слева)px;" Также можно задать размеры таблице, а в стилях прописать отступы в ней.
mogu80 вне форума
  		Ответить с цитированием Вверх
Старый 09.08.2011, 18:31   #6
LinkSS
Неактивный пользователь
 
Пол:Мужской
Регистрация: 09.08.2011
Сообщений: 3
Репутация: 0
По умолчанию Re: Как прижать футер к дну окна?
Не буду вдаваться в подробности, но попробуй поиграть с отрицательными маржинами и падингами, к примеру маржин-топ 100% а паддинг топ -(отрицательный) на величину подвала...если чо вынеси этот блок из общего потока (позишн=абсолюте)
LinkSS вне форума
  		Ответить с цитированием Вверх
Старый 22.11.2012, 13:06   #7
yosht
Новичок
 
Пол:Мужской
Регистрация: 16.04.2009
Сообщений: 13
Репутация: 2
По умолчанию Re: Как прижать футер к дну окна?
http://ryanfait.com/sticky-footer/

Это поможет вам многое
yosht вне форума
  		Ответить с цитированием Вверх
Ответ

« Предыдущая тема | Следующая тема »

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Потеют окна yurastef Свой дом, квартира 33 13.01.2015 11:57
свернуть все окна Николай71 Архив 2 02.11.2010 12:00
Окна программ Хельви Архив 6 02.03.2008 17:50
окна ПВХ designed Архив 3 20.10.2007 16:00

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения
BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход


Текущее время: 14:19. Часовой пояс GMT +3.

Реклама - Для правообладателей - Обратная связь - Портал .::2BakSa.WS::. - Архив - Вверх

Copyright ©2004 - 2024 2BakSa.WS

Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод: zCarot
Время генерации страницы 0.16636 секунды с 13 запросами