如何將頁腳設置在屏幕底部

Question

我希望我的頁腳位於任何屏幕的底部，而不僅僅是小部分。

下面是HTML和CSS：

<footer class="footer-distributed"> 

    <div class="footer-left"> 

    <p class="footer-links"> 
     <a href="index.html">Početna</a> 
     · 
     <a href="pages/rs/onama.html">O Nama</a> 
     · 
     <a href="pages/rs/reference.html">Reference</a> 
     · 
     <a href="pages/rs/usluge.html">Usluge</a> 
     · 
     <a href="pages/rs/galerija.html">Galerija</a> 
     · 
     <a href="pages/rs/kontakt.html">Kontakt</a> 
    </p> 

    <p class="footer-company-name">Copyright © <script> 
         document.write(new Date().getFullYear()) 
        </script> ddd </p> 
    </div> 

    <div class="footer-center"> 

    <div> 
     <a href=""/><i class="fa fa-map-marker"></i> 
     <p><span></span></p> 
    </div> 

    <div> 
     <i class="fa fa-phone"></i> 
     <p></p> 
    </div> 

    <div> 
     <a href="mailto:"/><i class="fa fa-envelope"></i> 
     <p><a href="mailto:" style="color:white;"></a></p> 
    </div> 

    </div> 

    <div class="footer-right"> 

    </div> 

</footer> 

Here is the css: 



    '.footer-distributed{ 
    background-color: #292c2f; 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
    box-sizing: border-box; 
    width: 100%; 
    text-align: center; 
    font: bold 16px sans-serif; 

    padding: 5px 50px; 
    margin-top: 80px; 
} 

.footer-distributed .footer-left, 
.footer-distributed .footer-center, 
.footer-distributed .footer-right{ 
    display: inline-block; 
    vertical-align: top; 
} 

/* Footer left */ 

.footer-distributed .footer-left{ 
    width: 40%; 
} 

/* The company logo */ 

.footer-distributed h3{ 
    color: #ffffff; 
    font: normal 36px 'Cookie', cursive; 
    margin: 0; 
} 

.footer-distributed h3 span{ 
    color: #5383d3; 
} 

/* Footer links */ 

.footer-distributed .footer-links{ 
    color: #ffffff; 
    margin: 20px 0 12px; 
    padding: 0; 
} 

.footer-distributed .footer-links a{ 
    display:inline-block; 
    line-height: 1.8; 
    text-decoration: none; 
    color: inherit; 
} 

.footer-distributed .footer-company-name{ 
    color: #8f9296; 
    font-size: 14px; 
    font-weight: normal; 
    margin: 0; 
} 

/* Footer Center */ 

.footer-distributed .footer-center{ 
    width: 35%; 
} 

.footer-distributed .footer-center i{ 
    background-color: #33383b; 
    color: #ffffff; 
    font-size: 25px; 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    text-align: center; 
    line-height: 42px; 
    margin: 10px 15px; 
    vertical-align: middle; 
} 

.footer-distributed .footer-center i.fa-envelope{ 
    font-size: 17px; 
    line-height: 38px; 
} 

.footer-distributed .footer-center p{ 
    display: inline-block; 
    color: #ffffff; 
    vertical-align: middle; 
    margin:0; 
} 

.footer-distributed .footer-center p span{ 
    display:block; 
    font-weight: bold; 
    font-size:14px; 
    line-height:2; 
} 

.footer-distributed .footer-center p a{ 
    color: #5383d3; 
    text-decoration: none;; 
} 


/* Footer Right */ 

.footer-distributed .footer-right{ 
    width: 20%; 
} 

.footer-distributed .footer-company-about{ 
    line-height: 20px; 
    color: #92999f; 
    font-size: 13px; 
    font-weight: normal; 
    margin: 0; 
} 

.footer-distributed .footer-company-about span{ 
    display: block; 
    color: #ffffff; 
    font-size: 14px; 
    font-weight: bold; 
    margin-bottom: 20px; 
} 

.footer-distributed .footer-icons{ 
    margin-top: 25px; 
} 

.footer-distributed .footer-icons a{ 
    display: inline-block; 
    width: 35px; 
    height: 35px; 
    cursor: pointer; 
    background-color: #33383b; 
    border-radius: 2px; 

    font-size: 20px; 
    color: #ffffff; 
    text-align: center; 
    line-height: 35px; 

    margin-right: 3px; 
    margin-bottom: 5px; 
} 

'

我怎能在屏幕底部的頁腳，獨立於內容的身體？

Answer 1

我認爲你在找什麼叫做粘腳。在這裏尋找一個很好的教程。我用這一切的時候：http://ryanfait.com/sticky-footer/

Answer 2

你要設置像在你的CSS如下：你爲什麼不把小提琴

footer{ 
    position: fixed; 
    bottom: 0; 
    width:100%; 
    left:0; 
}