Absolute footer positioning not working

Question

I have no idea how to fix this. Putting things in position: relative will reject the bottom: 0px, and will also create tons of spaces on pages that do not correspond to the entire height due to lack of content.

Placing absolute means that it covers the contents of pages that have content long enough to create a scroll bar.

.footer {
  width: 100%;
  height: 150px;
  background: #3167b1;
  position: absolute;
  bottom: 0px;
}

Should this work correctly? For some reason this is simply not the case. Is this wordpress? This problem has never occurred before, and I have already gone through and cleared a lot of problems that could have caused it.

EDIT: Stupid to me ... I forgot the html here. Now he has nothing, so just:

<div class="footer"></div>

. , , : http://www.yenrac.net/theme

, .

.

Answer 1

, :

http://jsfiddle.net/9qq1dtuf/

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 170px;
}
.footer {
    width: 100%;
    height: 150px;
    background: #3167b1;
    position: absolute;
    bottom: 0px; left: 0;
}

Answer 2

, css

.footer {
  position: fixed;
  bottom: 0;
  height: 150px;
  background: #3167b1;
  width: 100%;
  left: 0;
}

<div class='footer'>
</div>

Hide result

Answer 3

, , Wordpress... ( - ). , , HTML. , , :

, "footer". , footer ( ). , , (.. "." CSS):

footer {
  width: 100%;
  height: 150px;
  background: #3167b1;
  position: absolute;
  bottom: 0px;
}

Answer 4

css:

body {
    margin: 0;
    padding: 0;
    background: #efefef;
    font-family: 'Lato', serif;
    padding-bottom: 174px; //add this line - height of footer + margin from content
}

24px margin . , css:

* {
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
}

, .