HTML-页脚不在底部

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;
}

Answer 1

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> 

Answer 2

footer{ position: fixed
        bottom: 0px;
}

possible duplicate of: Bottom footer

Answer 3

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> 

Answer 4

    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>