самозагрузка нижнего липкого колонтитула перекрытия с сайтом

Question

Я использую следующую разметку, чтобы создать дно копирайта

<footer class="footer"> 
    <div class="container"> 
     <p class="text-muted">© Some Company</p> 
    </div> 
</footer> 

А вот CSS

/*   Sticky footer styles 
     -------------------------------------------------- */ 
    html { 
     position: relative; 
     min-height: 100%; 
    } 
    body { 
     /* Margin bottom by footer height */ 
     margin-bottom: 60px; 
    } 
    .footer { 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     /* Set the fixed height of the footer here */ 
     height: 60px; 
     background-color: #f5f5f5; 
    } 


    /* Custom page CSS 
    -------------------------------------------------- */ 
    /* Not required for template or sticky footer method. */ 

    body > .container { 
     padding: 60px 15px 0; 
    } 
    .container .text-muted { 
     margin: 20px 0; 
    } 

    .footer > .container { 
     padding-right: 15px; 
     padding-left: 15px; 
    } 

    code { 
     font-size: 80%; 
    } 

Вопрос заключается в том, что она совпадает с нижним часть содержимого сайта.

Как заставить его двигаться дальше?

Я не везло с этим CSS

.navbar-fixed-bottom { 
     padding-top: 10px; 
     height: 5%; 
    } 

Answer 1

Попробуйте добавить маржу в нижней части страницы и настройки position: fixed; в классе .footer CSS:

body { 
margin-bottom: 50px; 
} 

.footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
} 

Вот working example of your code и example from the bootstrap documentation.

Answer 2

html { 
     position: relative; 
     min-height: 100%; 
    } 
    body { 
     /* Margin bottom by footer height */ 
     margin-bottom: 60px; 
    } 
    .footer { 

     position: absolute; 
     /*this controls how far bottom the banner goes*/ 
     top: 110%; <---- THIS WAS THE MISSIN PIECE 
     bottom: 0; 
     width: 100%; 
     /* Set the fixed height of the footer here */ 
     height: 60px; 
     background-color: #f5f5f5; 
    } 


    /* Custom page CSS 
    -------------------------------------------------- */ 
    /* Not required for template or sticky footer method. */ 

    body > .container { 
     padding: 60px 15px 0; 
    } 
    .container .text-muted { 
     margin: 20px 0; 
    } 

    .footer > .container { 
     padding-right: 15px; 
     padding-left: 15px; 
    } 

    code { 
     font-size: 80%; 
    } 

Answer 3

Увеличить нижнее заполнение контейнера содержимого.

Если это правило для содержимого страницы (я не знаю, так как вы не выкладываете полный HTML структуры страницы) ...

body > .container { 
     padding: 60px 15px 0; 
    } 

... то изменить что последний «0» не менее 60 пикселей (попробуйте разные значения):

body > .container { 
     padding: 60px 15px 80px; 
    }