Как разместить нижний колонтитул в нижней части моей страницы?

Question

Как я могу получить нижний колонтитул, который всегда остается в нижней части моей страницы, даже если эта страница слишком мала, чтобы заполнить весь экран или больше?

У меня есть кнопка на моей странице, и когда вы ее касаетесь, она добавляет благодаря javascript многим элементам моей страницы и изменению размера страницы, но мой нижний колонтитул не меняет свое положение.

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

Я пробовал position: absolute;, но когда пользователь нажимает на кнопку, мой нижний колонтитул остается в его положении, и он не переходит в новое дно моей страницы.

Я не хочу, чтобы мой нижний колонтитул всегда был виден, но только для того, чтобы быть на самом дне моей страницы.

Answer 1

Комплексное решение объясняется в этой статье: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Основная хитрость в том, что вы будете иметь три части: заголовок, тело и нижний колонтитулы:
HTML:

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div> 

CSS:

html, 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#container { 
    min-height: 100%; 
    position: relative; 
} 
#header { 
    background: #ff0; 
    padding: 10px; 
} 
#body { 
    padding: 10px; 
    padding-bottom: 60px; /* Height of the footer */ 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px;   /* Height of the footer */ 
    background: #6cf; 
} 

Answer 2

Используйте следующие

footer { position: absolute; bottom: 0; }

Answer 3

попробовать это ... это будет держать футер в нижней части страницы:

position: fixed; 
    bottom: 0; 

Работа демо: https://jsfiddle.net/maky/bgeLbpd9/

#footer { 
    position: fixed; 
    bottom: 0; 
    background-color: black; 
    min-width: 100%; 
    font-family: Agency FB; 
    transition: height 3s; 
    height: 50px; 
} 

#footer1 { 
    text-align: center; 
    color: #4e4e4e; 
} 

#footer:hover { 
    opacity: .8; 
    color: white; 
    height: 100px; 
} 

Answer 4

Используйте это:

footer { 
    position: fixed; 
    bottom: 0; 
    /* Add a height and a width! */ 
}