2016-07-27 11 views
-1

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

.home-footer{ 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    z-index: 5; 
} 

, но он работает только если я колонтитул вне тела и поместить его прямо под HTML элемента. Как я могу сделать эту работу, сохраняя ее в теле?

EDIT Я обнаружил, что проблема в том, что у моего тела было transform: translateX(0). Казалось, что это противоречит фиксированному нижнему колонтитулу, потому что, как только я избавился от этого, это сработало. Однако мне нужно это правило, иначе мой слайд в навигации ломается.

+2

Нам нужно увидеть остальную часть вашего HTML и CSS, чтобы узнать, в чем проблема. –

ответ

0

Добавьте это в CSS:

html, body { 
    width: 100%; 
    height: 100%; 
} 
+0

Это сначала подталкивает его к основанию, но затем, когда я прокручиваю вниз, он не прокручивает страницу. –

+0

Я думаю, что ответ здесь -> http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom –

0

Попробуйте это:

HTML:

<body> 
    <div class="container"> 
    <footer>Your footer</footer> 
    </div> 
</body> 

CSS:

// wrapper in your body, where your footer will be in 
.container { 
    position: absolute; 
    top: 30px; 
} 

footer { 
    position: relative; 
    bottom: 0; 
    width: 100%; 
    height: 20px; 
} 
+0

Это не то, что я ищу для. Я хочу, чтобы CSS всегда был виден на экране, а внизу. Таким образом, он будет перемещаться по мере прокрутки страницы. –

+1

Я обновил свой вопрос. В основном это была проблема с преобразованием, находящимся на теле, которое, казалось, противоречило нижнему колонтитулу с фиксированной позицией. –

0

Я выяснил, что проблема заключалась в конфликте между применением преобразования к телу и наличием фиксированного нижнего колонтитула. Кажется, существует проблема, сочетающая эти два правила вместе. Я прибегал к использованию левого позиционирования для моей анимации, а не к трансформации, и это исправляло проблему. Это не идеально, но это сработало.