Hold footer below

Question

I have a layout where the footer is inside the body because I have a sidewall height of 100%.

The thing is, I need to maintain a footer below when the height of the body content is less than the height of the screen.

Here I am attaching an example script where you can see that the footer is just below the last line of the body.

In addition, when the height of the body content is higher than the height of the screen, the footer should follow the last line.

HTML

<div id="header">GENERAL HEADER</div> <div id="main_body">
    <div id="sidebar">SIDE</div>
    <div id="body">
        the content
        <div class="footer">general footer</div>
    </div>
</div>

CSS

*           {margin:0; padding:0;}
html        {overflow: hidden;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:100;}
body        {background:#fff; position:absolute; width:100%; height:100%;overflow: auto;}
#main_body  {
    background:#fff;
    height:100%;
    padding:50px 0 0;
    box-sizing:border-box;
    width:100%;
    min-width:900px;
}
#header     {
  background:#119911;
  position:absolute;
  width:100%;
  min-width:960px;
  height:50px;
  display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row nowrap;
  justify-content:flex-start;
  align-items:center;
}
#sidebar    {background:#f2f2f2; float:left; width:60px; height:100%; overflow:hidden;}
#body       {
    background:#c2c2c2;
    height:100%;
    overflow:scroll;
    word-wrap: break-word;
}
.footer {
    display: block;
    width:100%;
    height:60px;
    background-color:#551111;
    color:#fff;
    border-top:1px solid #CDCDCD;
}

What should I do?

Answer 1

I added the following properties to the footer class .

  bottom:0px;
  position:fixed;

Try the following:

*           {margin:0; padding:0;}
html        {overflow: hidden;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:100;}
body        {background:#fff; position:absolute; width:100%; height:100%;overflow: auto;}
#main_body  {
    background:#fff;
    height:100%;
    padding:50px 0 0;
    box-sizing:border-box;
    width:100%;
    min-width:900px;
}
#header     {
  background:#119911;
  position:absolute;
  width:100%;
  min-width:960px;
  height:50px;
  display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row nowrap;
  justify-content:flex-start;
  align-items:center;
}
#sidebar    {background:#f2f2f2; float:left; width:60px; height:100%; overflow:hidden;}
#body       {
    background:#c2c2c2;
    height:100%;
    overflow:scroll;
    word-wrap: break-word;
}
.footer {
    display: block;
    width:100%;
    height:60px;
    background-color:#551111;
    color:#fff;
    border-top:1px solid #CDCDCD;
    bottom:0px;
    position:fixed;
}

<div id="header">GENERAL HEADER</div>
<div id="main_body">
    <div id="sidebar">SIDE</div>
    <div id="body">
        the content
        <div class="footer">general footer</div>
    </div>
</div>

Run codeHide result

Answer 2

.footer {
    display: block;
    width:100%;
    height:60px;
    background-color:#551111;
    color:#fff;
    border-top:1px solid #CDCDCD;
    position:absolute;
    bottom: 0;
}

. , , : absolute;.