Добрый день! А подскажите пожалуйста каким образом можно прижать футер книзу страницы, при условии, что футер должен быть частью основного блока, который располагается по центру страницы и сверху/снизу от него должны быть отступы. Пробовал этот способ - не помогло, так как там футер получается отдельно от основного блока, и получается что футер как бы "вываливается". сайт о котором идет речь http://yarrsk.ru/
upd! спасибо всем за ответы, но похоже решил данную проблему сам, определяем главный блок как таблицу, внутренний блок футера превращаем в строку этой таблицы, дополнительно вертикально выравниваем по низу:
<div id="wrap">
<div id="header">...</div>
<div id="section">...</div>
<div id="footer">...</div>
</div>
html, body {height: calc(100% - 16px);}
body {margin: 16px;}
#wrap {display: table; position: relative; height: 100%; min-height: 100% !important; margin: auto;}
#footer {display: table-row; vertical-align: bottom; position: relative; height: 144px;}
upd2! Почему то после того как блок футера превратил в строку таблицы, к нему перестали применяться паддинги и маргины, хз что делать, решил просто обернуть еще в один блок:
<div id="wrap">
<div id="header">...</div>
<div id="section">...</div>
<div id="footer">
<div id="footer_section">...</div>
</div>
</div>
html, body {height: calc(100% - 16px);}
body {margin: 16px;}
#wrap {display: table; position: relative; height: 100%; min-height: 100% !important; margin: auto;}
#footer {display: table-row; vertical-align: bottom; position: relative; height: 144px;}
#footer_section {display: block; padding: 16px}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push,
#footer {
height: 60px;
}
<div id="wrap">
...
<div id="push"> </div>
</div>
<div id="footer">...</div>
Если футер фиксированного размера, скажем 10em, то можно вот так:
<div class="page-content">
Content!
</div>
<footer class="page-footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-content {
min-height: 100%;
margin-bottom: -10em;
}
.page-content:after {
content: "";
display: block;
}
.page-footer, .page-content:after {
height: 10em;
}
.page-footer {
background: orange;
}
<div class="wrap">
...
<div class="footer">
Я футер
</div>
</div>
html, body {
min-width: 100%;
}
.wrap {
min-height: 100%;
position: relative;
padding-bottom: 100px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
...при условии, что футер должен быть частью основного блока, который располагается по центру страницы и сверху/снизу от него должны быть отступы.
Основное правило гласит, что все старшие и соседние элементы страницы должны быть с процентными стилями. Если, конечно, хотите сделать это на CSS без JS. Например, даже футер Хабра прилепляется к низу, если скриптами и юзерстилями записать резметке страницы такие правила. Бывает такая раскладка, что процентные стили расставить будет невозможно.
В Вашем случае - то, что по центру (по горизонтали) - несущественно. А вот Хедер и футер у вас должны быть сделаны 0% высоты, а остальными стилями вставить в них нужную ненулевую высоту блоков. Пример того, как это делается со страницами Хабра, описан здесь: http://habrahabr.ru/post/151320/ чтобы увидеть, как работает - поставить скрипт (лучше на Firefox или старую Оперу, там надёжнее работало) и перейти на короткую страницу, например, эту https://auth.habrahabr.ru/settings/privacy/ (до вчера работали QA, где было много коротких страниц). Так же будут работать и короткие статьи и прочее, например, страница подготовки статьи.
Простой
Простой
Средний