« предыдущая тема следующая тема »
Страницы: [1]

Автор Тема: Как прижать футер к низу экрана  (Прочитано 1592 раз)

16 Июль 2014, 19:17:39
  • Новичок
  • *
  • Сообщений: 20
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Как прижать футер к низу экрана
Версия Prestashop: 1.5.6.1 , шаблон немного переделан из стандартного, нет правой колонки. Как сделать так, чтоб при не полном наполнении страницы футер не висел бы по середине экрана, а был всегда внизу страницы, а центральная колонка растягивалась автоматически по высоте экрана не зависимо от наполнения.
Код: [Выделить]
{$HOOK_HEADER}
</head>

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if}">
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country">
<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
</div>
{/if}
<div id="page" class="container_9 clearfix">
<!-- Header -->
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
</a>
<div id="header_right" class="grid_9 omega">
{$HOOK_TOP}
</div>
</div>

<div id="columnswrap" class="container_9 clearfix">
<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
<div id="left_column" class="column grid_2 alpha">
{$HOOK_LEFT_COLUMN}
</div>

<!-- Center -->
<div id="center_column" class=" grid_5">

{/if}
{if !$content_only}
</div>
</div>
</div><div class="wrap"></div>

<!-- Footer -->
<div id="footer" class="grid_9 alpha omega clearfix">
{$HOOK_FOOTER}
{if $PS_ALLOW_MOBILE_DEVICE}
<p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>
{/if}
<!-- Footer copyright -->
<div class="footer_copyright">
<p>{l s='Copyright © 2014'} <a href="http://></a>  |  {l s='Все права защищены'}</p>
</div></div>
<!-- /Footer copyright -->
</div>

</div>
{/if}
</body>
Записан
17 Июль 2014, 13:00:35
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 16670
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Это в стилях нужно делать. Спосов много. Можно javascipt использовать для изменения размеров центральной колонки.
Код: [Выделить]
$(function() {
    $("body").css({padding:0,margin:0});
      var f = function() {
        $("#center_column").css({position:"relative"});
        var h1 = $("body").height();
        var h2 = $(window).height();
        var d = h2 - h1;
        var h = $("#center_column").height() + d;   
        var ruler = $("<div>").appendTo("#center_column");       
        h = Math.max(ruler.position().top,h);
        ruler.remove();   
        $(".ndra-container").height(h);
      };
      setInterval(f,1000);
      $(window).resize(f);
      f();
});
Записан
17 Июль 2014, 15:18:56
Ответ #2
  • Новичок
  • *
  • Сообщений: 20
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Подскажите в каком файле нужно вывести этот скрипт, в header.tpl? Его нужно выносить в отдельные файл? <script type="text/javascript" src="Путь_до_скрипта"></script> такой строкой верно будет прописать путь? Если можно подскажите что можно сделать в стилях, все что не пробывала с помощью Css не помогает.
Записан
18 Июль 2014, 14:04:17
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 1285
  • Репутация: +13/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Как прижать футер к низу страницы?
1. Отделяем футер от всего остального содержимого, помещая его за пределы обрамляющего блока page
2. В файле стилей globals.css задаем высоту height у тегов html и body — 100%. Таким образом, растягиваем html и body на высоту экрана.
3. Блоку page задаем следующие параметры:
Код: [Выделить]
min-height: 100%;
height: auto !important;
height: 100%;4.  У блока columns-container задаем нижний отступ
Код: [Выделить]
padding: 0 0 100px;чтобы на это место поместить footer.
5.  Теперь высота страницы 100% + 100px. Лишние 100px убираем через footer
Код: [Выделить]
margin: -100px auto 0;
height: 100px;
position: relative;
Записан
22 Июль 2014, 12:45:48
Ответ #4
  • Новичок
  • *
  • Сообщений: 20
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Цитата: tigran от 18 Июль 2014, 14:04:17
Как прижать футер к низу страницы?
1. Отделяем футер от всего остального содержимого, помещая его за пределы обрамляющего блока page
2. В файле стилей globals.css задаем высоту height у тегов html и body — 100%. Таким образом, растягиваем html и body на высоту экрана.
3. Блоку page задаем следующие параметры:
Код: [Выделить]
min-height: 100%;
height: auto !important;
height: 100%;4.  У блока columns-container задаем нижний отступ
Код: [Выделить]
padding: 0 0 100px;чтобы на это место поместить footer.
5.  Теперь высота страницы 100% + 100px. Лишние 100px убираем через footer
Код: [Выделить]
margin: -100px auto 0;
height: 100px;
position: relative;

К сожелению это метод не помогает, футер после выноса за пределы page почему-то оказывается вне body, повидимому что-то с версткой не так. Помогло свойство #columnswrap {min-height: 800px}, но это наверно не совсем правильно, я так понимаю при большем разрешении экрана футер все равно подскачет.
Записан
22 Июль 2014, 13:28:32
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 1285
  • Репутация: +13/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Цитата: Elenka от 22 Июль 2014, 12:45:48
К сожелению это метод не помогает, футер после выноса за пределы page почему-то оказывается вне body, повидимому что-то с версткой не так. Помогло свойство #columnswrap {min-height: 800px}, но это наверно не совсем правильно, я так понимаю при большем разрешении экрана футер все равно подскачет.
Это не просто дилетантство — это просто элементарная некомпетентность. Так вам придеться для каждого разрешения прописывать высоту. Не слушайте таких советов.

То что у вас футер оказадся вне  body, это не правильно.
Принцип здесь в том, чтобы:
— задать тегам <html> и <body> высоту 100%, это заставит использовать всю доступную высоту окна браузера.
— задать обертке <page> минимальную высоту, равную 100%, footer позиционировать вне page, но внутри body.
— зарезервировать место под footer отрицательным отступом.
Минус такого метода в том, что у блока footer будет фикс. высота.
Записан
22 Июль 2014, 13:38:02
Ответ #6
  • Ветеран
  • *****
  • Сообщений: 22125
  • Репутация: +25303/-1
  • Prestashop - просто и эффективно
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Если у вас тема на boostrap, тогда сделать это можно с помощью класса navbar-fixed-bottom и javascript
Код: [Выделить]
if ($(document).height() <= $(window).height())
$(".footer").addClass("navbar-fixed-bottom");Вот пример - Sticky footer
Записан
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
22 Июль 2014, 14:44:55
Ответ #7
  • Новичок
  • *
  • Сообщений: 20
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Цитата: tigran от 22 Июль 2014, 13:28:32
Цитата: Elenka от 22 Июль 2014, 12:45:48
К сожелению это метод не помогает, футер после выноса за пределы page почему-то оказывается вне body, повидимому что-то с версткой не так. Помогло свойство #columnswrap {min-height: 800px}, но это наверно не совсем правильно, я так понимаю при большем разрешении экрана футер все равно подскачет.
Это не просто дилетантство — это просто элементарная некомпетентность. Так вам придеться для каждого разрешения прописывать высоту. Не слушайте таких советов.

То что у вас футер оказадся вне  body, это не правильно.
Принцип здесь в том, чтобы:
— задать тегам <html> и <body> высоту 100%, это заставит использовать всю доступную высоту окна браузера.
— задать обертке <page> минимальную высоту, равную 100%, footer позиционировать вне page, но внутри body.
— зарезервировать место под footer отрицательным отступом.
Минус такого метода в том, что у блока footer будет фикс. высота.

Получилось футер остсвить в body, но свойство работает только в опере остальные браузеры игнорируют, и еще что может быть в свойствах футер при этом уплывает в лево.
Записан
22 Июль 2014, 17:31:49
Ответ #8
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86688
  • Репутация: +25428/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Минимальная высота и кроссбраузерность.
min-height - css свойство для указания минимальной высоты (не работает в IE).
height:auto !important- установливает высоту блока, не работает в FireFox
Нужно добавить в стили хаков для разных версий браузеров.
Код: [Выделить]
div {
    min-height: 100%;
    height:auto !important;
    height: 100%;
}
Записан
22 Июль 2014, 17:50:37
Ответ #9
  • Новичок
  • *
  • Сообщений: 20
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Дело в том что в body и блоке page прописаны эти свойсва
Код: [Выделить]
{
height: auto !important;
height: 100%;
min-height: 100%;}на body это свойство распростроняется, а на встроенный блок page только в опере
Записан
24 Июль 2014, 15:19:28
Ответ #10
  • Ветеран
  • *****
  • Сообщений: 105673
  • Репутация: +39553/-0
    • Просмотр профиля
    • Webstudio UwK
Re: Как прижать футер к низу экрана
Структура стандарной темы Prestashop 1.5
Код: [Выделить]
<html>
<head>
</head>

<body id="" class="">
<!-- page -->
<div id="page" class="container_9 clearfix">
<!-- Header -->
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="" title=""><img class="logo" src="/img/logo.jpg" alt="" width="209" height="52" /></a>
<div id="header_right" class="grid_9 omega"></div>
</div>
<!-- /Header -->
<!-- column -->
<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
<div id="left_column" class="column grid_2 alpha"></div>
<!-- /Left -->
<!-- Center -->
<div id="center_column" class=" grid_5"></div>
<!-- /Center -->
<!-- Right -->
<div id="right_column" class="column grid_2 omega"></div>
<!-- /Right -->
</div>
<!-- /column -->
<!-- Footer -->
<div id="footer" class="grid_9 alpha omega clearfix"></div>
<!-- /Footer -->
</div>
<!-- /page -->
</body>
</html>Если вы хотите прижать футер к низу страницы таким способом, как написаго выше, то нужно добавить блок контейнер к блокам Header и columns, а Footer оставить в блоке Page.
Page задает ширину блоков на сайте.
Код: [Выделить]
<html>
<head>
</head>

<body id="" class="">
<!-- page -->
<div id="page" class="container_9 clearfix">
<div id="container"><!-- container -->
<!-- Header -->
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="" title=""><img class="logo" src="/img/logo.jpg" alt="" width="209" height="52" /></a>
<div id="header_right" class="grid_9 omega"></div>
</div>
<!-- /Header -->
<!-- column -->
<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
<div id="left_column" class="column grid_2 alpha"></div>
<!-- /Left -->
<!-- Center -->
<div id="center_column" class=" grid_5"></div>
<!-- /Center -->
<!-- Right -->
<div id="right_column" class="column grid_2 omega"></div>
<!-- /Right -->
</div>
<!-- /column -->
</div><!-- /container -->
<!-- Footer -->
<div id="footer" class="grid_9 alpha omega clearfix"></div>
<!-- /Footer -->
</div>
<!-- /page -->
</body>
</html>И добавить правила в файл стилей
Код: [Выделить]
body, html, #page {
    height: 100%;
    position: relative;
}
#container {
    min-height: 100%;
}
#columns{
    padding-bottom: 300px;     /* высота футера */
}
#footer {
    height: 300px;             /* высота футера */
    margin-top: -300px;    /* отрицательный отступ, равный высоте футера  */
}
Записан
Cоздание интернет сайтов Webstudio UwK
25 Июль 2014, 12:11:00
Ответ #11
  • Новичок
  • *
  • Сообщений: 20
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Re: Как прижать футер к низу экрана
Не понимаю почему, но работает только в опере, все сделала как описано, в остальных браузерах страница не растягивается на всю высоту.
Записан
Страницы: [1]
« предыдущая тема следующая тема »