Проблемы с липким нижним колонтитулом CSS - PullRequest
Новая
       33

Проблемы с липким нижним колонтитулом CSS

10 голосов
/ 11 октября 2010

Я пытаюсь реализовать липкий нижний колонтитул CSS.

Проблема заключается в том, что содержимое DIV выходит за пределы контейнера, что приводит к нежелательным полосам прокрутки, а фоновое изображение, свисающее с div страницы, не увеличивает всю высоту документа.

Вот мой HTML: 

    <div id="page">
          <div id="header">
            <dl>
                <dt>Header links -</dt>
                <dd><a href="#">link 1</a></dd>
                <dd><a href="#">link 2</a></dd>
                <dd><a href="#">link 3</a></dd>
            </dl>
          </div>
        <div id="content">
            <p><a id="modal" href="popup.html" target="_blank">link to popup</a></p>
        </div>      
        <div id="footer">
            <dl>
                <dt>Footer links -</dt>
                <dd><a href="#">link 1</a></dd>
                <dd><a href="#">link 2</a></dd>
                <dd><a href="#">link 3</a></dd>
            </dl>
        </div>
    </div>

А вот и CSS: 

/*--------------------------------------------------------------- global */

html, 
body {
    color:#969696;
    font-size:100%;
    height:100%;
}

body {
    font:normal 200 70% Arial, Helvetica, Verdana, sans-serif;  
}

a, 
a:link, 
a:visited, 
a:hover, 
a:active {
    border-bottom:1px dashed #ff8400;
    color:#ff8400;
    text-decoration:none;}

a:hover {
    border-bottom-style:solid;}

/*--------------------------------------------------------------- layout */

#page {
    background:url("../images/bgMain.jpg") repeat-y center top;     
    height:100%;
    margin:0 auto;
    position:relative;
    width:1024px;
}

dl, 
dt, 
dd {
    float:left;
} 


dd {
    margin:0 .2em 0;
}

dd:after {
    color:#969696;
    content:"|";
    padding:0 0 0 .3em;
}

dd:last-child:after {
    content:"";
}

/*----------------- header */

#header {
    margin:0 auto;
    width:726px;
}

#header dl {
    float:right;
    line-height:60px;
}

/*----------------- content body */

#content {
    background:#fff;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
        -moz-border-radius-topleft:5px;
        -moz-border-radius-topright:5px;
        -webkit-border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;
    box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);    
        -moz-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
        -webkit-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
    clear:both;
    height:100%;
    margin:0 auto;  
    min-height:100%;
    padding:16px 13px 22px;
    position:relative;
    width:700px;
}

/*----------------- footer */

#footer {
    clear:both;
    margin:-22px auto;
    position:relative;
    width:726px;
}

#footer dl {
    display:inline; 
    margin:0 0 0 13px;
}

#footer a, 
#footer a:link, 
#footer a:visited, 
#footer a:hover, 
#footer a:active {
    border-bottom-color:#969696;
    color:#969696;
}

Ответы [ 10 ]

9 голосов
/ 11 октября 2010

Фантастический CSS Tricks веб-сайт имеет в своем фрагментах фрагмент кода для Sticky Footer

http://css -tricks.com / snippets / css / sticky-footer /

или с использованием jQuery

http://css -tricks.com/ фрагменты / jquery / jquery-sticky-footer /

последняя ссылка с демо

5 голосов
/ 17 июня 2014

Современный чистый CSS «Липкий нижний колонтитул» от Джеймс Дин

HTML 

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS 

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Демонстрация здесь

4 голосов
/ 11 октября 2010

Очевидно, вам нужно изменить свои правила, чтобы #footer включал определенную высоту, а затем отрицательное правило на полях со значением, равным вашей определенной высоте.

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

3 голосов
/ 20 января 2013

В этом репозитории github вы найдете ( липкий нижний колонтитул Bredele css ) двух версий липких нижних колонтитулов: один с заголовком, а другой без.

Обе эти версии используют display: table (работает с IE8) без лишних разметок, без clearfix и гибкой высоты содержимого. Более того, высота заголовка не зависит от заполнения содержимого или относительной области просмотра!

Надеюсь, это будет полезно!

Olivier

3 голосов
/ 10 марта 2012

Пару дней назад я написал очень чистый нижний колонтитул CSS, вы можете найти его полезным.

http://mystrd.at/modern-clean-css-sticky-footer

2 голосов
/ 11 октября 2010

Избавьтесь от полос прокрутки, используя 

overflow: hidden

на контейнере, где они появляются.

1 голос
/ 11 октября 2010

Используйте следующий стиль для нижнего колонтитула: 

#footer{position:absolute;bottom:0}

Это всегда будет помещать его внизу экрана, если вы хотите внизу <div id="page"> добавить 

#page{position:relative}
0 голосов
/ 12 октября 2018

Существует очень полезный трюк CSS, который всегда будет привязывать ваш нижний колонтитул к основанию, даже если высота содержимого ниже высоты области просмотра.

См. Код HTML ниже: 

<!DOCTYPE html>
<html>
 <head>
  <title>Sticky Footer</title>
 </head>
 <body>
  <div class="content">&nbsp;</div>
  <footer>&copy; 2016</footer>
 </body>
</html>

См. Код CSS ниже: 

body {
 margin: 0; /* If not already reset */
}

.content {
 min-height: calc(100vh - 20px);
}

footer {
 height: 20px;
}

В вашем случае я бы поместил nav и article в div "content".И дайте ему минимальное значение calc (100vh - 100px).

Вот источник статьи: Sticky CSS Footer

0 голосов
/ 21 февраля 2018

Вы можете использовать этот стиль: 

html {
    height: 100%;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0 0 8rem 0;
    min-height: 100%;
    position: relative;
}

.myFooter {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    padding: 0 8rem;
}
0 голосов
/ 25 января 2013

Что делать, если вы не знаете высоту нижнего колонтитула, например, с адаптивным макетом?Является ли единственная возможность использовать JavaScript и window.onresize?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...