100% Height Div Between Header and Footer

how to make DIV height 100% between header and footer

I created an example in jsfiddle:

UPDATED JsFiddle: http://jsfiddle.net/5V288/1025/

HTML:

<body>
    <div id="header"></div>
    <div id="content"><div>
        Content 
    </div></div>
    <div id="footer"></div>
</body>

CSS:

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
    padding: 70px 0;
}

Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.

How to make 100% div height between header and footer?

You DO need to change BODY to height:100%;

working demo

css

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative; height: 100%;
}
#top {
    height: 50px;
    background-color: red;
}
#anchored-footer {
    bottom: 0;
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green; /* because I need this border to go all around the content area */
    background-color: yellow;
    min-height:calc(100% - 110px);
}

*Notice: No position:absolute is used at all.. you don't need it, especially if you want your content to push your footer down.. then definitely don't use absolute.

Can't make 100% div height between header and footer with Bootstrap 4

Flexbox is your friend here too.

However, before you read any further: you should not use the alpha version of Bootstrap 4 any more as beta 2 is out!

.container {

    border: solid blue; 

}

html {

    height: 100%;

}

body {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}

main {

    flex: 1;

    margin-top: 56px;

}

footer {

    height: 10vh;

}

<header>

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">

        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries">My Logo</a>

    </nav>

</header>

<!-- Begin page content -->

<main role="main" class="container">

    <div class="row mt-3" style="border: solid green">

        <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div>

        <div class="col-sm-12 col-md-5">col</div>

        <div class="col-sm-12 col-md-4">col</div>

    </div>

</main>

<footer>

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse h-100"></nav>

</footer>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

CSS - 100% Height with Header and Footer

Using CSS3 Flexbox:

/*QuickReset*/*{margin:0;box-sizing:border-box;}

body {                /* body - or any parent wrapper */

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

main {

  flex: 1;

}

<header>HEADER</header>

<main>MAIN</main>

<footer>FOOTER</footer>

add a div between header and footer that takes up rest of the view height

Taking a look at your Fiddle, there are many improvements you can make to your markup & CSS, but coming to your issue first, the reason why its not sliding down as expected is this :

position: absolute

you added this to your main div which should go in between .projects-wrapper. First thing I would say is make this a flex as well instead of block element.

Secondly, add a wrapper to your entire project body & Make that flex. like so

<div class="wrapper"> //this should be flex
  <header>..</header> //this "could" be flex depending on its contents
  <div class="projects-wrapper"></div>
  <footer>...</footer> //this "could" be flex depending on its contents
</div>

let me know if you are facing any other problems

How can I make a sidebar 100% in height between header and footer using bootstrap 5

Bootstrap will have certain classes whose properties are strictly not to be changed.

I have introduced a new class called full-screen which will use 100 percent height of your viewport by using 100vh then I subtracted the height of your header and footer by using calc(100vh - 131px) where 131px is your header + footer height.

I am pretty sure this will work on all screen sizes given that you have fixed header and footer sizes all time. In case the height of header or footer changes just recalculate manually and replace 131px to whatever number you calculate and adjust until you don't see a scroll.

Demo link: https://jsfiddle.net/awesomestvi/7gxqa265/10/

Content 100% height between header and footer

You can use flex boxes. flex: 1 container will take as much space as it can.

.wrapper {
  display: flex;
  flex-direction: column;
}

.wrapper .content {
  flex: 1;
}

.wrapper .header {
  height: 100px;
}

How to create div to fill all space between header and footer div

Flexbox solution

Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.

See JS Fiddle

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

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

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}