stick content at the bottom of the page

Question

My problem:

I designed single page. Header, content(section and aside) and footer.

Footer and header are sticky.

I want content to stick to the end of page and above footer.

Guide me, please.

have a look at this: http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom?rq=1 — Shlomi Haver, Dec 24 '16 at 09:48
Look at it http://stackoverflow.com/questions/2810262/how-to-stick-a-text-to-the-bottom-of-the-page — Prabhu, Dec 24 '16 at 09:49
Tanks. I sow it later. This is'nt my awnser. I want a div (content) stick to footer. — M Ghorbanimoghadam, Dec 24 '16 at 12:13

score 0 · Accepted Answer · answered Dec 24 '16 at 12:23

Are you implying something like this. In this example. no matter what screen size your content will always stick to the footer, even if there is a single line in it.

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
body{
  display:flex;
  flex-direction: column;
}
#container
{
    margin: 0 auto;
    width:90%;
    background-color: white;
    border: 2px solid black;
    flex-shrink:0;
    flex-grow:1;
    display:flex;
}
.header,.footer
{
    margin: 0 auto;
    width:100%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 1px solid black;
    flex-shrink:0;
    background-color:green;
  color:white;
}
.col {
    height:90%;
    flex-shrink:0;
    flex-grow:1;
    margin:0 2% 0 2%;
}

<div class="header">
  Header here
</div>
<div id="container">
  <div class="col">
    test column 1
    <p>
    Content
    </p>
    <p>
    Content
    </p>
    <p>
    Content
    </p>
  </div>
  <div class="col">
    test column 2
    <p>
    Content
    </p>
    <p>
    Content
    </p>
    <p>
    Content
    </p>
  </div>
</div>
<div class="footer">
Footer Here
</div>

Hi sorry,can you help me for stick 'section' element and content of 'sidebar' to bottom of page, too?! — M Ghorbanimoghadam, Dec 25 '16 at 08:22

stick content at the bottom of the page

1 Answers1