HTML - Footer not at the bottom

Question

I want the footer be pushed down and appear as last element of the page. However as the content wrapper before has a height of 100%. The content's height exceeds the height of the browser height. In the end the footer appears after the browserheight and not after the content wrapper. How can I change it and still have a 100% height of the wrapper, that is needed for the background design.

codepen

HTML

<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>

CSS

body, html{
  height: 100%;
}

.content_wrap{
  height: 100%;
  width: 100%;

  border: 2px solid black;
}

.item{
  height: 1300px;
  width: 100%;

      background: red;
}

footer{
  height: 100px;
  width: 100%;
  background: yellow;
}

Sleek Geek · Accepted Answer · 2014-12-16T14:04:09.537

3

Give the body position property value of relative and position property value of absolute & bottom value of -(footer Height) for the footer

  body {
  height: 100%;
  position: relative;
}
.content_wrap {
  height: 100%;
  width: 100%;
  border: 2px solid black;
}
.item {
  height: 1300px;
  width: 100%;
  background: red;
}
footer {
  height: 100px;
  width: 100%;
  background: yellow;
  position: absolute;
  bottom:-100px; /* minus the height of the Footer and it wont overlap any other element */
}

<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>

edited Dec 16 '14 at 14:04

answered Dec 12 '14 at 14:08

Sleek Geek

4,638
3
27
42

I really think this only works if the content is at least 100% of the height of the screen – ckuijjer Dec 12 '14 at 15:02
Just share the same block of code for HTML and body. It will always remain at the bottom, no matter the height of the content. See this fiddle http://jsfiddle.net/zvqq9y8s/ where I reduced the height of the content. – Sleek Geek Dec 12 '14 at 15:15
You've added `html { height: 100% }`. Now it doesn't work anymore if the content is 1300px – ckuijjer Dec 12 '14 at 15:24
For the content to be salable, make the height of the container auto. if you make it fixed, then the bottom property value of the footer should be minus almost the height of the content container for it not to overlap. – Sleek Geek Dec 12 '14 at 15:29
1

exactly your example jsfiddle with more content: http://jsfiddle.net/ckuijjer/m3jgvtgL/ – ckuijjer Dec 12 '14 at 15:35

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

footer{ position: fixed
        bottom: 0px;
}

possible duplicate of: Bottom footer

edited May 23 '17 at 12:05

Community

1
1

answered Dec 12 '14 at 14:05

Coding Enthusiast

3,865
1
27
50

2

but then the footer is visible all the time, that is not wanted – user5372 Dec 12 '14 at 14:06

score 0 · Answer 3 · answered Dec 12 '14 at 14:11

If you use min-height: 100% instead of height: 100% on the content_wrap it will be at least 100% of the screen in height and it will grow if the content inside it is larger.

body, html{
  height: 100%;
}

.content_wrap{
  min-height: 100%;
  width: 100%;

  border: 2px solid black;
}

.item{
  height: 1300px;
  width: 100%;
  background: red;
}

footer{
  height: 100px;
  width: 100%;
  background: yellow;
}

<div class="content_wrap">
  content wrap
  <div class="item">content</div>
</div>
<footer>footer</footer>

score 0 · Answer 4 · answered Dec 13 '14 at 06:54

    body{
      display:flex;
flex-flow:column;
height:100%;
    }

    header{
      flex:0 0 75px;
    }

    .middle-container{
      display:flex;
flex: 1 0 auto;
    }

    footer{
      flex: 0 0 25px;
    }
    <header>Header</header>
    <div class="middle-container">
      content wrap
      <div class="item">content</div>
    </div>
    <footer>footer</footer>

HTML - Footer not at the bottom

4 Answers4