-1

I want to push footer to the bottom of the page with little content.

It tried the code below and the footer is pushed to the bottom, but I can't scroll pages with lots of content. 

#Wrapper, body {
  height:100%;
 background: white;
}

#Wrapper {
  display: flex;
  flex-direction: column;
}

#Header_wrapper, #Content {
  flex: 1 0 auto;
}

#Footer {
 flex-shrink: 0;
 margin-top:auto
}
 <body>
  <div id="Wrapper">
    <div id="Header_wrapper"></div>
    <div id="Content"></div>
    <footer id="Footer"></footer>
  </div>
</body>
Jimy
  • 1
  • 3
  • Of course you can’t scroll any more, if you limit the body to a height of 100% … A correct implementation: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ – misorude Sep 02 '19 at 11:08

1 Answers1

0

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Rakibul Islam
  • 679
  • 9
  • 18
  • It is an existing project and I can not reorganize the HTML, there is much more code, I just showed a simplified structure, but thanks anyway! – Jimy Sep 02 '19 at 11:53