Нижний колонтитул не останется внизу страницы

Question

Мой нижний колонтитул не будет находиться внизу страницы. Теперь, когда я использую position: fixed; или position: absolute;, он говорит в нижней части браузера, а не на странице. Поэтому я хочу, чтобы он оставался в нижней части веб-страницы, но также остался ниже содержания.

Я попытался добавить height: 100%; к моей обертке (мой нижний колонтитул вне моей обертки), и это не сработало. Я также просто попытался добавить липкий нижний колонтитул, и это не сработало, но я тоже оставил эту часть в моем jsfiddle.

Вот мой jsfiddle: http://jsfiddle.net/PfVFd/

Теперь, кажется, работает с маленьким экраном (например, в окне результатов на jsfiddle), но разрешением 1080, он не работает, так вот мой сайт также: HTTP: http://erraticfox.com/about.html

Answer 1

вы должны прочитать Райана документацию о липкой сноске, все находится на: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Чтобы закончить мой предыдущий ответ:

http://jsfiddle.net/PfVFd/1/

Вы должны иметь положение: фиксированный

footer { 
line-height: 100px; 
position: fixed; 
background: rgba(28, 32, 36, 1); 
bottom:0px; 
width: 100%; 
margin-left: 0; 
margin-right: 0; 
height: 100px; 
text-align: center; } 

Answer 2

Сделайте позицию: абсолютная и низ: 0px

*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing:   border-box; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding-bottom: 4rem; 
 
    min-height: 100%; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
} 
 

 

 
footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
}

<footer>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</footer>