How to keep footer at the bottom until content filled with body height?

Question

I would like to keep the footer at the bottom of the browser, until the content filled up with body height. let it the content box empty.

what is the correct approach to do this?

here is my try:

Live Demo

SCSS:

.wrapper.container-fluid{
    padding:0;
    margin: 0;
    border:2px dashed red;
    display: flex;
    flex-direction:column;
    height: 100%;
    max-height:inherit;

    header{
        border: 1px  solid blue;
    }

    div.content{
        border:1px solid gray;
        display: flex;
        flex-direction:row;
        height: 100%;

        .leftnavi{
            border:1px solid gray;
            width: 20%;
            background:lightgray;
        }

        .rightContent{
            border: 1px solid red;
            max-width: 100%;
            width: 100%;
            background:lightgreen;
        }

    }

    footer{
        border: 1px solid green;
    }
}

html:

<div class="wrapper container-fluid">

    <header>
        <h2>Header title goes here</h2>
    </header>

    <div class="header-navi">
        Header navi goes here
    </div>

    <div class="content">
        <div class="leftnavi">
            I am left navi
        </div>
        <div class="rightContent">
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quod labore distinctio nulla delectus, recusandae officiis at. Earum accusamus ea, sed dignissimos. Voluptatem, exercitationem! Dignissimos porro labore vel velit beatae.</div>

        </div>
    </div>

    <footer>Footer goes here</footer>

</div>

https://stackoverflow.com/questions/40020921/ – kukkuz Mar 20 '19 at 07:00 — kukkuz, Mar 20 '19 at 07:00

Andy Hoffman · Accepted Answer · 2019-03-20T06:55:33.963

The first step is to set the min-height of the container to 100vh. The 4px is due to your 2px border (2px top, 2px bottom).

.wrapper.container-fluid {
  …
  border: 2px dashed red;
  min-height: calc(100vh - 4px);
}

The final step is set flex-grow: 1 to the main content section. The footer will always be at the bottom of the page (or further down if content dictates scrolling).

div.content {
   …
  flex-grow: 1;
}

Demo

.wrapper.container-fluid {
  padding: 0;
  margin: 0;
  border: 2px dashed red;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
  min-height: calc(100vh - 4px);  /* Added */
}
.wrapper.container-fluid header {
  border: 1px solid blue;
}
.wrapper.container-fluid div.content {
  border: 1px solid gray;
  display: flex;
  flex-direction: row;
  height: 100%;
  flex-grow: 1; /* Added */
}
.wrapper.container-fluid div.content .leftnavi {
  border: 1px solid gray;
  width: 20%;
  background: lightgray;
}
.wrapper.container-fluid div.content .rightContent {
  border: 1px solid red;
  max-width: 100%;
  width: 100%;
  background: lightgreen;
}
.wrapper.container-fluid footer {
  border: 1px solid green;
}
body {
  margin: 0;
}

<div class="wrapper container-fluid">

  <header>
    <h2>Header title goes here</h2>
  </header>

  <div class="header-navi">
    Header navi goes here
  </div>

  <div class="content">
    <div class="leftnavi">
      I am left navi
    </div>
    <div class="rightContent">
      <div>Lorem ipsum dolor sit amet</div>

    </div>
  </div>

  <footer>Footer goes here</footer>


</div>

jsFiddle

You should know by now to use the built in "vote to close as duplicate" instead of answering. — Asons, Mar 20 '19 at 07:04
@Andy Hoffman - I am using chrome 70, it's not working properly. finding chrome with bug, do you have any fix for chrome 70? — 3gwebtrain, Mar 20 '19 at 10:30
@3gwebtrain I've tested in Chrome 73.0.3683.75 and it looks identical to Safari/Firefox/Edge, etc. Please include a link to the webpage so I can test directly in Chrome. — Andy Hoffman, Mar 20 '19 at 16:32

score -2 · Answer 2 · answered Mar 20 '19 at 07:05

-2

Use this CSS in your current fiddle

footer{
    border: 1px solid green;
    position: absolute;
    bottom: 0;
    width: calc(100% - 16px);
    margin: 0;
}

answered Mar 20 '19 at 07:05

Danny Mahoney

1,255
2
13
24

How to keep footer at the bottom until content filled with body height?

2 Answers2