Как кодировать липкий нижний колонтитул, используя HTML-объект, в HTML и CSS?
Я использую Less Framework 4 для двух сайтов, которые я разрабатываю. В обоих проектах я хочу применить 5-пиксельную рамку как сверху, так и снизу документа.
Проблема: из-за стилей, примененных к телу, я применяю border-bottom и border-top к html- объекту, поэтому нижняя граница никогда не прилипает к нижней части страницы, как это происходит в обычной ситуации с липким нижним колонтитулом,
Вот скриншоты для двух случаев: 
Бельгийский клиент http://f.cl.ly/items/2X2B0R2f053N0h1T1j3Q/prikonline.png
Вот (Меньше) CSS, который я использую для html и body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid @black 10px;
border-bottom: solid @black 10px;
background: url('img/bg.png') repeat;
}
body {
width: @8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: @white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: @green;
}
Я пытался использовать height: 100% как для body а также html объекты, но вот как это выглядит вживую: http://prikonline.be/prikactie/
Как мне приклеить границу к нижней части страницы?
8 ответов
Вместо этого вы можете использовать обертку нижнего колонтитула, как это.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid @black 10px;
width: 100%;
}
и просто вставьте это прямо перед </body> или что-то
<div class="footer"></div>
Я не советую вам применять CSS к элементу html. Вместо этого создайте div с похожими стилями. В общем случае ваш код должен быть таким:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
Это прекрасно работает во всех браузерах, даже в IE6:)
Похоже, вы используете какой-то инструмент динамической таблицы стилей (например, LESS). Обычно инструменты динамической таблицы стилей позволяют использовать JavaScript. Таким образом, вы можете определить высоту как:
@height: `window.innerHeight + 'px'`;
А потом добавить что-то вроде
body{
...
min-height: @height;
}
Конечно, проблема в том, что если бы пользователь изменил размер окна своего браузера, макет не обновлялся бы соответствующим образом. Вы могли бы использовать window.onresize обратный вызов, чтобы справиться с этим.
Конечно, вы можете использовать JavaScript для обработки всего этого. Конечно, некоторые категорически против использования JavaScript для стилизации (разделение поведения, контента и стиля), при попытке чего-то вроде липкого нижнего колонтитула иногда проще просто написать две строки JavaScript, чем пытаться придумать какой-нибудь умный CSS, который может работать или не работать в каждом браузере, на который вы пытаетесь настроить таргетинг. Если у пользователя отключен JavaScript, то страница просто не заполняет всю высоту страницы на страницах с меньшим содержанием.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
Ты можешь использовать position:fixed; а также bottom:0px; чтобы всегда, независимо от вашего состояния прокрутки и высоты содержимого, закрепите его снизу.
Хммм... выкладываю min-height: 100% на html элемент на вашей странице (манипулирование в Web Inspector) сработал для меня сразу в Chrome; что ты тестируешь?
Этот подход, однако, идет чуть более 100% из-за высоты границы, которую можно исправить в IE8+/Gecko/WebKit с помощью CSS box-sizing свойство (используйте значение border-box).
Для IE7 и IE6, если вы хотите, чтобы они отображались одинаково, было бы довольно легко написать небольшой JavaScript, который при загрузке или при изменении размера проверяет высоту окна, сравнивает с высотой документа и, если необходимо, вызывает HTML элемент до высоты окна минус 20.
Вы всегда можете реализовать этот рабочий CSS-код с липким нижним колонтитулом (я добавил встроенную социальную панель):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><a href="https://twitter.com/"><img src="#" height="42" width="42"></img></a></li>
<li class="social"><a href="https://github.com/"><img src="#" height="42" width="42"></img></a></li>
<li class="social"><a href="https://vimeo.com"><img src="#" height="42" width="42"></img></a></li>
</ul>
</div>
</div>
Просто отредактируйте hrefs для своих личных URL-адресов, а image src для нужных вам изображений социального стиля (или включите пакет с отличными шрифтами, если он у вас есть).
Вот как я добавил границу тела внизу:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}<p>content</p>Ключ min-height: 100vh, который гарантирует, что высота тела будет, по крайней мере, равна высоте области просмотра. Потому что box-sizing: border-box Граница тела будет учитываться в росте. По-прежнему существует проблема с полями содержимого, перемещающими границу ниже области просмотра, но это можно исправить произвольным padding-top значение.