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

0

Issue

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>

Solution

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

Answered By – Andy Hoffman

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More