^ Наверх
Тегам
apple tv, bootstrap, centos, cheat sheets, chyrp, cms, cp1251, css, css-framework, daos, ddos, denwer, disqus, dns, doodles, efix, endels, evernote, firefox, flash, forex, forex mmcis group, google, google drive, hosts, httrack, hypercomments, input, intensedebate, ipad pro, iphone, iphone 6s, iphone 6s+, jquery, json, lenovo, livejournal, lj, mac os, mac pro, mamp, microtext, monstra cms, ping-admin, reg.ru, selectel, simaphone, stick footer, template cms, textpattern, to do, toup, uptime, utf8, vds, xampp, агс, банковская карта яндекс.денег, блог-клиент, блоггинг, верстка, виртуальный сервер, выравнивание в блоке, гидеон сундбек, гоша, дудлы, задачка, идея, инвестиции, интернет-магазин, кино, клиенты, кодировка, комменты, кросспостинг, микро cms, молния, мониторинг, мотив, мошенники, наверх, облако, обои, оптимизация, оффлайн, оффтоп, ошибки, платон, почта для домена, прижать футер, проверка flash, рип сайта, сателлиты, ссср, старт, техника, управление временем, успехи, фотоальбом, фоторепортаж, хостинг, цели, шпаргалки, шпоры, электронные деньги, яндекс, яндексдиск, яндекс мерика, яша
Сортировать по:

Прижатый футер

Лично для меня очевидно, что футер, или «подвал сайта» должен быть прижат к окну браузера, независимо от объема содержания страницы. Это просто правило хорошего тона в web-дизайне. Но видимо не для всех. Так как дизайнер из меня никакой, я частенько работаю с шаблонами и постоянно сталкиваюсь с этой проблемой. Сдавать сайт с дизайном на пол экрана как то не «комильфо», поэтому приходиться с этим бороться.

Прижать футер можно двумя способами. Первый, при помощи правил css стилей используя обертку с отрицательными margin-ами и распорку. Его еще называют методом Раяна Фэйта. И второй способ, использование небольшой js функции, которая будет проверять высоту window и устанавливать высоту нашего блока с контентом. Какой из способов использовать решать лично Вам. Говорят, что использовать css правильнее и работает он быстрее. Но js тоже не стоит сбрасывать со счетов. Бывают ситуации, когда как раз он выручает. Как правило, это связано со сложностью верстки шаблона.

И так, листинг первого способа.

 layout.css
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
index.html
<html>
    <head>
        <link rel="stylesheet" href="layout.css" />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Не поленитесь и посетите первоисточник.

Второй способ, функцию вставляем в head, после подключения JQuery

$(function() {
$("body").css({padding:0,margin:0});
  var f = function() {
    $(".ndra-container").css({position:"relative"});
    var h1 = $("body").height();
    var h2 = $(window).height();
    var d = h2 - h1;
    var h = $(".ndra-container").height() + d;    
    var ruler = $("<div>").appendTo(".ndra-container");       
    h = Math.max(ruler.position().top,h);
    ruler.remove();    
    $(".ndra-container").height(h);
  };
  setInterval(f,1000);
  $(window).resize(f);
  f();
});
index.html
<html>
<body>
	<div>Шапка</div>
	<div class='ndra-container' >Контент</div>
	<div>Подвал</div>
</body>
</html>

За js решение спасибо чувачку с хабра.

comments powered by HyperComments

Оставьте комментарий