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

Lord Demon · May 25, 2011

верстаю шаблон под osCommerce 3.0, столкнулся с кажется банальной проблемой, не так ведь сложно прижать футер к низу экрана, а страницу растянуть на всю высоту вне зависимости от содержимого. Но что-то я запутался немного, а за два дня с этой проблемой уже и никаких вариантов в голову не приходит, буду благодарен если кто укажет где моя ошибка))

вот стили основной части сайта, без шапки и футера

/* @group structure */

#container {
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
        height: 100%;
	text-align: left;
	background: #e0e9ed;
	overflow: hidden;
}

#left-column {
	width: 166px;
	position: relative;
        top: 80px;
        float: left;
	clear: both;
	margin-left: 25px;
}

#main-column {
	width: 752px;
	float: left;
        position: relative;
        left: 35px;
        top: 80px;
        padding:left: 10px;
        padding-right: 20px;
        padding-bottom: 0px;
        background: #ffffff;
}

#container:after {
   content: ".";
   display: block;
   height: 0;
   visibility: hidden;
   clear: both;
}

#right-column {
	width: 173px;
	float: right;
}

/* @end */

вот стили футера

/* @group footer */

#footer-container {
	background: #3ea2c2;
        width: 100%;
        height: 179px;
        margin-top: 0px;
        position: absolute;
        bottom: 0;
}

#footer {
	clear: both;
	padding-top: 20px;
	width: 1000px;
 	margin-right: auto;
 	margin-left: auto;
	background: transparent;
	overflow: hidden;
}

/* @group footer-navigation */

#footer-navigation {

	background: transparent;
	width: 1000px;
        height: 79px;
        position: relative;
	text-align: center;
	margin-left: 22px;
	margin-right: 22px;
        z-index: 5;
}

#footer-navigation ul {
	height: 34px;
}

#footer-navigation li {
	height: 34px;
	display: inline;
	text-align: center;
}

#footer-navigation li a {
	color: black;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	padding-left: 14px;
	padding-right: 14px;
	line-height: 34px;
	background: url(images/footer-navigation-sep.png) no-repeat right top;
}

#footer-navigation li a:hover {
	color: black;
        text-decoration: none;
}

#footer-navigation li.last a {
	background-image: none;
	padding-right: 0;
}



/* @end */

/* @group footer-copy */

#footer-copy {
	clear: both;
	text-align: center;
	padding-top: 100px;
	color: #0c576e;
	font-size: 11px;
	background: url(images/footer-copy.png) no-repeat top center;
	width: 1000px;
        height: 77px;
        position: relative;
        bottom: 100px;
        left: -2px;
	margin-right: auto;
	margin-left: auto;
}

#footer-copy a {
	color: #898989;
	text-decoration: none;
}

#footer-copy a:hover {
	color: #333;
	text-decoration: underline;
}



/* @end */

если для "footer-container" выставляю значение абсолют то он прижимается к низу экрана, но на 1024х768 наезжает на основное содержимое, так и оставшись внизу первого экрана если релатив - то он выравнивается по краю содержимого, но если страница пустая то висит на середине страницы. Суть - никаким способом не могу растянуть основное содержимое на всю высоту экрана, вне зависимости от разрешения так, чтобы на нее не налазил футер. Ошибок не нашел, валидатором проверял, несколькими способами пробовал это осуществить - не получилось) Структуру страницы если надо могу скинуть, могу даже ссылку на тестовый сайт в личку скинуть. Заранее спасибо за совет!

andrecool · May 25, 2011

По пробуй такое решение http://usabili.ru/examples/div_footer.html

Gaspode · May 25, 2011

если для "footer-container" выставляю значение абсолют то он прижимается к низу экрана, но на 1024х768 наезжает на основное содержимое, так и оставшись внизу первого экрана

Ну дык вы поставьте контенту отступы снизу, он и не будет наезжать.

Lord Demon · May 25, 2011

Пробовал такой вариант, вот сейчас попробовал еще раз для надежности - футер внизу, но на маленьком экране наезжает на содержимое. Мне кажется из-за того что в примере все блоки находятся внутри одного блока "all", у меня же, если убрать все скрипты то index.php выглядит таким образом:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="asd" xml:lang="asd" lang="asd">

<head>
</head>

<body>
  <div id="container">

    <!-- header //-->
    <div id="header">

        <div id="header-logo">

        </div>

        <div id="header-links">

        <div id="header-links-basket">

        </div>

        </div>

        <div id="header-nav-top" class="header-nav-top">

        </div>

        <div id="header-nav-lower">

            <ul>

            <li>    <div id="header-nav-search">

			<form name="search" action="search.php" method="get">

				<p><?php echo $osC_Language->get('button_search'); ?>:</p>

				<p><?php echo osc_draw_input_field('keywords', null, 'id="header-nav-search-box" size="24"'); ?></p>

				<p><input type="image" id="header-nav-search-go" src="templates/<?php echo $osC_Template->getCode(); ?>/images/header-nav-search-go.png"></p>

			</form>

                  </div></li>
                  <li><a href="/index.php">Главная</a></li>
                  <li><a href="#"></a></li>
                  <li><a href="#"></a></li>
                  <li><a href="#"></a></li>
                  <li><a href="#"></a></li>
                  <li><a href="#"></a></li>

				<li></li>

                </ul>

		</div>

    </div>

<!-- eof_header //-->

    </div>

<!-- left_column //-->
    <div id="left-column">   

    </div>	
<!-- eof_left_column //-->		

<!-- main_column //-->
    <div id="main-column">

        <div style="clear: both;"></div>

	</div>
<!-- eof_main_column //-->

<!-- right_column //-->
    <div id="right-column">	

    </div>
<!-- eof_right_column //-->

    </div>


    <div id="footer-container">

	<div id="footer">

		<div id="footer-navigation">

			<ul>

				<li></li>

				<li></li>

				<li class="last"></li>

			</ul>

		</div>

	</div>

        <div id="footer-copy">

	</div>

</div>		

</body>

</html>

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

Gaspode, ставил педдинг снизу на 178рх и больше и если футеру присвоить "position:relative" то он прижимается к основному блоку и не наезжает на содержимое, но тогда не прижимается к нижнему краю. Точнее как - на маленьком мониторе хватает содержимого на странице чтобы прижать, на большом же футер висит четко посредине монитора Пробовал для body, main-column, container присваивать "height: 100%", "min-height: 100%" - нужного результата не дает, хотя должно бы..

Lord Demon · May 25, 2011

http://testingdaemonjoomla.serw5.com/index.php - ссылка на тестовый сайт. Все работает кроме футера

Gaspode · May 25, 2011

А как должно быть-то?

Lord Demon · May 25, 2011

там может не заметно, если монитор побольше, но если добавить больше текста в основной блок, то он растянется, а футер останется на месте. Если смотреть на 1024х768 то даже того содержимого что есть хватает чтобы залезть под футер. А в мозилле он почему-то еще и отступает от низа страницы пикселей на сто.. а должно быть так же, но футер должен быть прижат во всех браузерах к низу страницы и при добавлении содержимого отступать вниз, а не оставаться на месте.

Lord Demon · May 26, 2011

проблема решена!

Edited May 26, 2011 by Lord Demon

Sign In

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

Question

Lord Demon

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

andrecool

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Lord Demon

Link to comment

Share on other sites

Lord Demon

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Lord Demon

Link to comment

Share on other sites

Lord Demon

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information