Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 22
Прибивать футер к низу страницы придумал Максим Захаров несколько лет назад и делается это за 5 минут:
<body>
<div class="page-wrapper">
<div class="page-buffer"></div>
</div>
<div class="page-footer">
</div>
</body>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.page-wrapper {
min-height: 100%;
margin-bottom: -50px;
}
* html .page-wrapper {
height: 100%;
}
.page-buffer {
height: 50px;
}
Это только если футер фиксированный.
Несомненно, если бы я написал «15 минут» (я так вначале хотел), было бы эффектнее. Но, подумав, написал «45», хотя, и это может не оказаться правдой.
И ещё, Вы уверены, что именно он — автор метода (кстати, дата не указана), а не строили стандарты доктайпов так, чтобы подобная реализация была возможной?
И ещё, Вы уверены, что именно он — автор метода (кстати, дата не указана), а не строили стандарты доктайпов так, чтобы подобная реализация была возможной?
Уверен. С Максимом лично знаком один из моих коллег.
Он придумал этот метод задолго до статьи Sticky Footer, опубликованной 09.2009.
Впрочем, коли уж Вы попираете стандарты на которых строиться весь интернет и так Вами любимый Хабр, то будет Вам известно, что суть моего комментария в том, что Ваш пример «для начинающих верстальщиков» может оказаться сложным, запутанным и в итоге бесполезным, а вот простой и наглядный пример Захарова совсем другое дело.
Он придумал этот метод задолго до статьи Sticky Footer, опубликованной 09.2009.
Впрочем, коли уж Вы попираете стандарты на которых строиться весь интернет и так Вами любимый Хабр, то будет Вам известно, что суть моего комментария в том, что Ваш пример «для начинающих верстальщиков» может оказаться сложным, запутанным и в итоге бесполезным, а вот простой и наглядный пример Захарова совсем другое дело.
Читал я когда-то все эти примеры, но понимания не дало. Точнее, понятно (или непонятно, почему там восьмёрки боком), как именно этот вариант работает, как немного другой, но взять любую раскладку и создать прибитый футер — копнуть надо немного глубже.
Ссылку я дал на «самого авторитетного верстальщика в мире», а вообще есть на первой странице Гугла ссылки от 2008 года. По идее, как доктайпы появились, так и должны появиться эти решения.
Ссылку я дал на «самого авторитетного верстальщика в мире», а вообще есть на первой странице Гугла ссылки от 2008 года. По идее, как доктайпы появились, так и должны появиться эти решения.
А обязательно вставлять пустой элемент с заданной высотой или можно написать так?
Преподаватель в видеокурсе по верстке не мог никак прибить и пока он бурчал, я так сделал
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body, html, #wrapper{
height:100%;
padding: 0;
margin: 0;
}
body{background-color: #eef;}
#content{
min-height: 100%;
border: 1px solid transparent;/*иначе сверху виден фон body*/
padding-bottom: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
}
#footer{
height: 200px;
margin-top: -200px;
background-color: rgba(255,0,4,0.46);
}
</style>
</head>
<div id="wrapper">
<div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, ea, cupiditate, soluta vel odit saepe accusantium adipisci facere voluptatum ad fugiat qui accusamus laborum tempora nam quae aliquid minima dicta!</p>
<p>Unde, autem, excepturi, dicta, temporibus praesentium saepe magni voluptas rem aliquid voluptatum facilis tenetur numquam eaque! Voluptatem, laborum, culpa voluptas vel harum delectus pariatur iure ullam repudiandae tempora ex ad.</p>
</div>
<div id="footer">11111</div>
</div>
<body>
</body>
</html>
Преподаватель в видеокурсе по верстке не мог никак прибить и пока он бурчал, я так сделал
> как за 45 минут сделать «прибитый» футер
Это к вопросу о том, почему w3c надо вырвать руки по самые гланды
Это к вопросу о том, почему w3c надо вырвать руки по самые гланды
Я вот сдела на основе таблицы прибитый футер с произвольной высотой и не парюсь. Никаких хаков, никаких глюков нигде: fragster.ru
В свое время реализовывал с ныне выпиленым товарищем SelenIT такое же через зщабытые свойства css, примерно так: silverflame.at.tut.by/sticky3.html
В свое время реализовывал с ныне выпиленым товарищем SelenIT такое же через зщабытые свойства css, примерно так: silverflame.at.tut.by/sticky3.html
Таблица, к сожалению не очень хороший способ, потому что её поведение сильно зависит от пустых ячеек и видов браузеров. Попробуйте поочерёдно делать в ней пустые ячейки и добиваться одинакового поведения во всех браузерах — узнаете о таблицах массу интересного :). В итоге, я пришёл к выводу о допустимых форматах таблиц в раскладке (могло бы быть темой отдельной статьи): форматы очень ограниченные. Сделать на них прибитый футер удалось, но не так, как у Вас.
… А я обращался с вопросом по теории (к этой статье) к другому, очень похожему товарищу SelenIT2, за что ему спасибо :).
… А я обращался с вопросом по теории (к этой статье) к другому, очень похожему товарищу SelenIT2, за что ему спасибо :).
Зачем делать пустые ячейки, когда их три — хеадер, боди и футер? Или вообще две…
Я же не предлагаю ВСЕ делать таблицами, только «прилипающий футер»
Ну и я не про «всё — таблицами».
Пустые — затем, что иногда бывает, что в ячейке пусто. И это должно корректно работать везде. Некоторые браузеры реагируют даже на малозаполненную ячейку (1-10 символов) — одно из измерений приобретает неправильный размер. Было года 2 назад, Опера версии порядка 9-10, Ие6-8. Было не скучно, каждый браузер удивлял по-своему. Сейчас может кое-что измениться в стабильности, но настоятельно рекомендую проверить все крайние случаи, чтобы они не стали сюрпризом.
Пустые — затем, что иногда бывает, что в ячейке пусто. И это должно корректно работать везде. Некоторые браузеры реагируют даже на малозаполненную ячейку (1-10 символов) — одно из измерений приобретает неправильный размер. Было года 2 назад, Опера версии порядка 9-10, Ие6-8. Было не скучно, каждый браузер удивлял по-своему. Сейчас может кое-что измениться в стабильности, но настоятельно рекомендую проверить все крайние случаи, чтобы они не стали сюрпризом.
Спасибо, еще один способ реализации в копилку.
Подскажите как побеждаете изменения ширины страницы в случаях когда контент больше по длине одной страницы и появляется вертикальный скорл. При переходе между большой и маленькой страницей сайт прыгает, что неимоверно напрягает.
Я полагаю Ваш способ отличается от overflow-y:scroll; в body
Спасибо.
Подскажите как побеждаете изменения ширины страницы в случаях когда контент больше по длине одной страницы и появляется вертикальный скорл. При переходе между большой и маленькой страницей сайт прыгает, что неимоверно напрягает.
Я полагаю Ваш способ отличается от overflow-y:scroll; в body
Спасибо.
Простите, где ещё один способ? По строению страницы этот способ (реализация его на Хабре) ничем не отличается от шаблона, приведённого в начале — просто скриптами преобразуется неподходящее строение страницы в подходящее. Основной смысл — пользуясь «теоретическими» основами создания прибитого футера на CSS, можно делать со страницей необходимое, например, перекраивать раскладку.
Со скроллом в данном случае никто никак не борется, поэтому он будет появляться, а страница — прыгать. Чтобы не прыгала, есть способ сделать постоянное наличие скролла на странице — в данном случае, надо было бы написать
Со скроллом в данном случае никто никак не борется, поэтому он будет появляться, а страница — прыгать. Чтобы не прыгала, есть способ сделать постоянное наличие скролла на странице — в данном случае, надо было бы написать
#layout{overflow-y: scroll}
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Прибитый к низу футер своими руками