2015-10-21 5 views
-1
footer { 
    text-align: center; 
    background-color: #fff; 
    line-height: 72px; 
    margin: 0; 
    position: relative; 
    max-width: 100%; 
    height: 60px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: auto; 

} 


footer, .push { 
    height: 60px; /* '.push' must be the same height as 'footer' */ 
    max-width:100%; 
} 

/** Sticky Footer by Ryan Fait -http://ryanfait.com/ */ 

.cf:before 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/*http://nicolasgallagher.com/micro-clearfix-hack/ */ 

HTMLМой сноска не будет оставаться на дне

<div class="cf"></div> 

<div class="push"></div> 
</main> 
<footer><div> 
<ul> 
<li>NAME</li> 
<li>DESIGN</li> 
<li>Portoflio </li> 
</ul> 
</div> 
</footer> 

</body> 
</html> 

Что мне делать?

+0

изменить 'position: relative' to' position: absolute' и добавить 'bottom: 0;' to footer в css –

+0

Пожалуйста, прочитайте и полностью адаптируйте образец кода, где вы его нашли, и ваша проблема исчезнет ... http : //ryanfait.com/resources/footer-stick-to-bottom-of-page/ – LGSon

+0

@soffili - добро пожаловать на переполнение стека, когда вы задаете вопрос, попробуйте сделать скрипку. спасибо – abidkhanweb

ответ

0

в CSS ходу:

footer { 
    text-align: center; 
    background-color: #fff; 
    line-height: 72px; 
    margin: 0; 
    position: fixed; <--- 
    max-width: 100%; 
    height: 60px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: auto; 
    bottom:0; <--- 
} 
0

Вам нужно обернуть ваше все содержимое до колонтитула в оберточном элементе. Пример, который вы читаете: propably this one. Использование фиксированного элемента в нижнем колонтитуле - это то, что я бы не предложил в этом вопросе.

Смежные вопросы