CSS - Header - Always Bottom Footer and 100% Content

CSS - header - always bottom footer and 100% content

You have too many heights going on:

Remove the min-height and max-height values from your selectors.

Remove the position: absolute; from your #wrap div.

I made an example for you here.

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

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>

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

How to allows make footer on the bottom but not letting it cover content

Hii Fire Lost check this solution. in this solution, I have set header and footer position: relative and both elements will be display top of the page and bottom of the page

you need to set fix height in the main tag. I have used 80px of header and 60px of the footer.
i have applied this min-height: calc(100vh - 140px); css in wrapper element.
if this answer is valuable for you. plz upvote me.

<html> 
  
<head> 
    <style> 
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            position: relative;
            height: 80px;
            width: 100%;
            background: #333333;
            text-align: center;
            font-size: 22px;
            color: #fff;
            padding: 25px 0;
        }

        main {
            position: relative;
            min-height: calc(100vh - 140px);
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        footer {
            position: relative;
            height: 60px;
            width: 100%;
            background: #333333;
            text-align: center;
            font-size: 22px;
            color: #fff;
            padding: 18px 0;
        }
    </style> 
  
    <head> 
  
        <body> 
            <header><p>Header</p></header>
            <main><p>Body Content</p></main>
            <footer><p>Footer</p></footer>
        </body> 
        <html>

Putting footer bottom of page through 100% height

This is the core logic of the solution:

html{
  position: relative; /* Allows the footer to notice content height */
  min-height: 100vh;  /* My page will always take the full screen */
}

main{
  margin-bottom: 100px; /* prevents footer overlap (footer height + 20px) */
}

footer{
  position: absolute; /* I don't care about other things */
  bottom: 0; /* I want to be on the bottom... */
  left: 0;   /* ...and to the left */
}

JSBin

I tried to keep it as simple as possible.

This answer does not use flexbox its pure ol' css.

Footer at bottom of page or content, whichever is lower

Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.

Flexbox Version

If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.

The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

#main-wrapper {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  min-height: 100%;

}

article {

  -webkit-box-flex: 1;

      -ms-flex: 1;

          flex: 1;

}

header {

  background-color: #F00;

}

nav {

  background-color: #FF0;

}

article {

  background-color: #0F0;

}

footer {

  background-color: #00F;

}

<div id="main-wrapper">

   <header>

     here be header

   </header>

   <nav>

   </nav>

   <article>

     here be content

   </article>

   <footer>

     here be footer

   </footer>

</div>

CSS - Footer at the bottom and content in between header and footer

Add width: 100vw; and height: 100vh; to your wrapper, it will stretch . I also added

html, body{
  margin: 0;
}

because the 100vw doesn't take into account the margin of the body, you'll have to set it to 0.

* {

  box-sizing: border-box;

}

html, body{

  margin: 0;

}

.wrapper {

  max-width: 1024px;

  margin: 0 auto;

  font: 1.2em Helvetica, arial, sans-serif;

  width: 100vw; 

  height: 100vh;

}

.wrapper>* {

  border: 2px solid #f08c00;

  background-color: #ffec99;

  border-radius: 5px;

  padding: 10px;

}

nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

.wrapper {

  display: grid;

  grid-template-columns: repeat(12, [col-start] 1fr);

  grid-template-rows: 50px auto auto 50px;

  grid-gap: 20px;

}

.wrapper>* {

  grid-column: col-start / span 12;

}

@media (min-width: 500px) {

  .side {

    grid-column: col-start / span 3;

    grid-row: 3;

  }

  .ad {

    grid-column: col-start / span 3;

    grid-row: 4;

  }

  .content,

  .main-footer {

    grid-column: col-start 4 / span 9;

  }

  nav ul {

    display: flex;

    justify-content: space-between;

  }

}

@media (min-width: 700px) {

  .main-nav {

    grid-column: col-start / span 2;

    grid-row: 2 / 4;

  }

  .content {

    grid-column: col-start 3 / span 8;

    grid-row: 2 / 4;

  }

  .side {

    grid-column: col-start 11 / span 2;

    grid-row: 2;

  }

  .ad {

    grid-column: col-start 11 / span 2;

    grid-row: 3;

  }

  .main-footer {

    grid-column: col-start / span 12;

  }

  nav ul {

    flex-direction: column;

  }

}

<div class="wrapper">

  <header class="main-head">The header</header>

  <nav class="main-nav">

    <ul>

      <li><a href="">Nav 1</a></li>

      <li><a href="">Nav 2</a></li>

      <li><a href="">Nav 3</a></li>

    </ul>

  </nav>

  <article class="content">

    <h1>Main article area</h1>

    <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>

  </article>

  <aside class="side">Sidebar</aside>

  <div class="ad">Advertising</div>

  <footer class="main-footer">The footer</footer>

</div>

Content with 100% between header and footer

Depending on how your page is set up, it may work if you set height: 100%; for (B) and position: absolute; for the container element. Here is an example:

HTML:

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

CSS:

#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}

jsFiddle

CSS - Header - Always Bottom Footer and 100% Content