[HTML/CSS] Footer se noče prilepiti na dno strani

Meni izgleda ok na jsfiddlu (https://jsfiddle.net/h3f30nwa/ )

da bi imel footer vedno na dno moraš vse v bodyu oviti z wrapperjem npr tako

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

in uporabiti css da ti htm,body nastavi height na 100%; margine in paddinge lahko daš na 0 da nimaš robu

containerju daš relativno pozicijo, in min-height na 100%;

potem pa da footer spraviš na dno, da je vedno tam mu daš absolutno pozicijo in bottom:0, širino 100% in pa seveda višino - absolutna(footer) znotraj relativne(container) povzroči da bo footer na dnu containerja in ne celotne strani...

css koda:

html,
body {
   height: 100%;
   margin: 0;
   padding: 0;
}
#container {
   position: relative;
   min-height: 100%;
}
#header {  /*header je prvi element v containerju, zato mu ni treba nič nastavljat in bo vedno pri vrhu*/
   background: red;
   padding: 10px;
}
#body {
   padding: 10px;
   padding-bottom: 60px;   /* višina footerja */
}
#footer {
   position:absolute;
   bottom: 0;
   width: 100%;
   height: 60px;   
   background: green;
}

you are welcome

Tako, sem poskusil rešit težavo, ampak ni uspelo. Problem je očit v tem, da je malo contenta na strani, ampak ne vem kako naj to rešim (nočem dodajati več contenta)

IcyFox je 1. avg 2017 ob 14:12 izjavil:

Tako, sem poskusil rešit težavo, ampak ni uspelo. Problem je očit v tem, da je malo contenta na strani, ampak ne vem kako naj to rešim (nočem dodajati več contenta)

Nekdo ne poslusa. FX6300B ti je podal univerzalno resitev.

smacker je 1. avg 2017 ob 15:53 izjavil:

ugly but simple hack je da content boxu nastaviš min-height in ga s tem prisiliš da potisne footer na dno

glede na to da šele začenja z html in css, priporočam da ne uporablja teh ugly "hackov", ker se jih je potem vrjetno hudič odvadit..

rešitev ki sem ti jo dal bi morala delovati, povej še z katerim brskalnikom odpiraš stran, samo ne reči da je kakšen internet explorer

drugače pa ga meni v fiddlu pokaže čisto na dnu je možno da ti da na body margin?, probaj v css dodati

 body { 
    margin: 0;
}

Dejansko ne znam razložit zakaj, ampak po tem ko sem danes vso kodo spremenil na staro, je to začelo delovati. Vseeno hvala za pomoč

Hvala lepa za pomoč, imam definitivno namen nadaljevati :)