-5

i hopte that someone will helpe me. This will sound ridiculously, but i trying to solve this problem for 2-3 days... I want my footer on the bottom of the page. If i have little content i want my footer on bottom of the screen, but if there is many content i want my footer on the bottom of the page.

I was try many combinations, but nothing works... margin-top, float content and clear: both; footer... just there is no effect. Footer is on the bottom of the screen, coz i set bottom: 0px;, but when i scroll down, footer go up... and i can't figure out why...

here is my code... you can see all of that.

`https://jsfiddle.net/nemanja917/bxy9m29g/`

And i hope that someone know where problem is.

Thank you.

P.S. I need PURE CSS solution

Edit... You mark this question as duplicate... yes.. it is, but there is no right answer, so i open this again to try to find one.

And i need footer on bottom of my PAGE, not SCREEN. So i can't use position: fixed;

Nemanja Milovanovic
  • 1
  • 1
  • 1
    What have you done so far? Show us your code. – David Mar 02 '18 at 23:49
  • 1
    You are required to post your markup and code here, not a jsfiddle. [mcve] A fiddle can compliment your example but not be used in its stead. – Rob Mar 02 '18 at 23:50

2 Answers2

0

You are putting bottom: 0px; instead try

 .footer {
    position: absolute;
    width: 80%;
    bottom: 0;
    background-color: darkblue;
    color: white;
    font-size: 20px;
    padding: 10px 0px;
    text-align: center;
    clear: both;
}
  • 2
    What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Mar 03 '18 at 00:02
-2

You can try this:

.footer {
  position: fixed;
  height: 100px;
  width: 100%;
  bottom: 0;
}
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
Joni Jiniani
  • 1
  • 4