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

Question

Я пытаюсь реализовать липкий нижний колонтитул 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; 
} 

Answer 1

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

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

или с помощью JQuery

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

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

Answer 2

Избавиться от скроллинга с помощью

overflow: hidden 

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

Answer 3

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

#footer{position:absolute;bottom:0} 

Это поставит его в нижней части экрана в любое время, если вы хотите его в нижней части <div id="page"> добавить

#page{position:relative} 

Answer 4

Видимо, вы должны изменить правила #footer включить определенную высоту , а затем отрицательное правило margin-top со значением, равным вашей определенной высоте.

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

Answer 5

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

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

Answer 6

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

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

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

Оливье

Answer 7

А когда вы не знаете высоту футера, например, с гибкой планировкой?Единственный вариант использования JavaScript и window.onresize?

Answer 8

Modern Clean CSS «Sticky Footer» от James Dean

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%; 
} 

Demo here

Answer 9

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

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; 
}