Footer не находится в нижней части страницы

У меня есть веб-страница, на которой я использую плагин jQuery «Supersized» для изменения фона. У меня также есть подвал, который показывает только, если я ставлю следующий CSS для него:Footer не находится в нижней части страницы

#footer{ 
    width: 100%; 
    color: #ffffff; 
    background: #000000; 
    position: fixed; 
    bottom: 0px; 
    height: 40px; 
    padding: 5px 0px 5px 0px; 
}

Однако, когда что-то происходит, что изменяет высоту окна, содержимое страницы идет за сноской, и когда я прокручиваю вниз , нижний колонтитул не остается внизу страницы - он прокручивается вверх.

Например, у меня есть три div, которые показаны бок о бок, но когда размер окна изменяется под 900px ширины, divs отображаются один под другим, и поэтому изменяется высота окна. Вот когда divs идут за нижним колонтитулом, и он прокручивается вместе с ними.

Я пробовал position: relative и position: static, но тогда он даже не отображается даже при высоких значениях z-индекса. Я думаю, что это «не-показ» из-за плагина, который я использую для фоновых изображений. Я также пробовал некоторые функции jquery, когда окно меняет высоту, но результатов нет. Любые идеи? Спасибо заранее ...

источник

2014-02-09 Marko Cakic

'fixed' держит раздел в фиксированном положении по отношению к окну (а не на странице). Это то, что вы хотите? Если вы хотите, чтобы нижний колонтитул всегда находился в конце страницы, вы должны искать нижний колонтитул «Sticky». В этом случае вы не можете сделать это только в CSS, поскольку это зависит от структуры вашего HTML, которую вы здесь не показывали. – helderdarocha

Если ваша цель держать футер в нижней части «содержимого страницы» и видимым, то я бы посоветовал вам назначить height:100% ваш html тег и ваш body тег в CSS. С другой стороны, если вы хотите, чтобы нижний колонтитул оставался в нижней части окна «Browser Window/Viewport», вам нужно посмотреть "Making a footer stay put with CSS" by "JONATHAN LONGNECKER". Надеюсь, что я помог! Афина
@ athenacreations.org

источник

2014-02-09 22:25:49

Вот пример:

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
main { 
 
    padding-bottom: 30px; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
}

<body> 
 
    <header> 
 
    header 
 
    </header> 
 
    <main> 
 
    main 
 
    </main> 
 
    <footer> 
 
    footer 
 
    </footer> 
 
</body>

источник

2017-01-02 16:31:31 Vadizar

Footer не находится в нижней части страницы

ответ

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