Как закодировать липкий нижний колонтитул, используя html-объект, в HTML и CSS?

Question

Я использую Less Framework 4 для двух веб-сайтов, которые я разрабатываю.В обоих проектах я хочу применить 5-пиксельную границу как сверху, так и снизу документа.

Проблема: из-за стилей, примененных к body , я применяю рамку-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/

Как мне следуетприклеить границу к нижней части страницы?

Answer 1

Вместо этого вы можете использовать обертку нижнего колонтитула, как это.

.footer {
  position: absolute;
  bottom: 0;
  border-bottom: solid @black 10px;
  width: 100%;
}

и просто вставьте это прямо перед </body> или что-то

<div class="footer"></div>

Answer 2

Я не советую вам применять 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:)

Answer 3

Похоже, вы используете какой-то инструмент динамической таблицы стилей (например, 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
}

Answer 4

Хммм ... Помещение min-height: 100% в элемент html на вашей странице (манипулирование в Web Inspector) сработало для меня сразу в Chrome;в чем вы тестируете?

Однако этот подход немного превышает более 100% из-за высоты границы, которую можно исправить в IE8 + / Gecko / WebKitсо свойством CSS box-sizing (используйте значение border-box).

Для IE7 и IE6, если вы хотите, чтобы они отображались одинаково, было бы довольно легко написать небольшой JavaScript, который,при загрузке или при изменении размера проверяет высоту окна, сравнивает с высотой документа и, если необходимо, переводит HTML-элемент в высоту окна минус 20.

Answer 5

Попробуйте изменить его на:

height:auto;

для вашего HTML CSS.

Answer 6

Вы можете использовать position:fixed; и bottom:0px;, чтобы всегда, независимо от состояния прокрутки и высоты содержимого, зафиксировать его в нижней части.

Answer 7

Вот как я добавил границу тела внизу:

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.

Answer 8

Вы всегда можете реализовать этот рабочий 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>&#169;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 - по изображениям социального стиля, которые вы хотите (или включите пакет шрифтов awesome, если он у вас есть).