CSS Layout Help - Stretch Div to Bottom of Page

How do I force a DIV block to extend to the bottom of a page even if it has no content?

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

This site has some excellent examples:

http://www.brunildo.org/test/html_body_0.html

http://www.brunildo.org/test/html_body_11b.html

http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/

Extend div to bottom of page (only HTML and CSS)

Solution: #1: css tables:

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}

html, body {  height: 100%;  width: 100%;}body {  display: table;  margin: 0;}#top, #bottom {  width: 100%;  background: yellow;  display: table-row;}#top {  height: 50px;}#bottom {  background: lightgrey;  height: 100%;}

<div id="top" style="height:50px;"><span>A header</span></div><div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

How to stretch div from top to the bottom of the page?

Try this… You can monkey with the styles to make it the way you want. I put your border inside .Main and changed html, body to height: 100%

Note: The positioning looks funky because of your use of absolute positioning for the margins of Main. I would change that. But if you copy the code to your page it might be what you're aiming for.

html, body {    height: 100%;}
.page {    background: linear-gradient(#2d5aa4, #03637c);    height: 100%;    margin: 0;    background-repeat: no-repeat;    background-attachment: fixed;    position: relative;}
.NavigationBar {    background: linear-gradient(to right, #636363, #4e4e4e);    position: absolute;    left: 0px;    top: 0px;    bottom: 0px;    width: 220px;    min-height: 100%;    z-index: 2;    font-family: BloggerSans;    font-size: 1.5em;}.NavigationBarBorder {    background: linear-gradient(to right, #292929, #171617);    position: absolute;    right: 0;    top: 0;    bottom: 0;    width: 10px;    min-height: 100%;    z-index: 3;}
.MainParent {    position: relative;    min-height: 100%;}
.NavigationTop {    background: linear-gradient(#636363, #4e4e4e);    position: absolute;    left: 220px;    width: calc(100vw - 220px);    height: 75px;    z-index: 1;    font-family: Jaapokki;    font-size: 2em;}
.Main {    background: linear-gradient(#ffffff, #e8e8e8);    position: absolute;    top: 20vh;    bottom: 0px;    width: calc(100vw - 440px); /* set your width */    left: 220px;    margin-left: 90px; /*set your margin here */    min-height: 100%;    z-index: 4;    padding-left: 40px;}
.MainBorder {    background: linear-gradient(#f79104, #e9720d);    position: absolute;    top: -10px;     left: 0;    width: 40px;    min-height: 100%;}
h1 {    font-family: 'Jaapokki';    text-align: center;    font-size: 3em;}
.Text {    font-family: 'BloggerSans';    font-size: 2em;}

<body class="page">    <div class="MainParent">        <nav class="NavigationBar">            <div class="NavigationBarBorder"></div>            Table of content        </nav>        <header class="NavigationTop">            Navigation        </header>        <div class="Main">            <h1>Title</h1>            <div class="Text">                Text </br>            </div>            <div class="MainBorder"></div>        </div>    </div></body>

How to make a div extend to the bottom of the page without getting too tall

You can use flexbox to have the .wrapper, or .table in your example, div fill up the remaining height.

For the parent element (in your example, body) set display: flex; flex-direction: column;

For the element that you want to expand (.wrapper or .table) set flex-grow: 1.

Your Example Updated: https://jsfiddle.net/754s67ur/2/

How can I make an DIV stretch to the bottom of the page after scrolling

I used display: flex and re-arranged some container divs to get what you are looking for (I think!). Take a look at A Complete Guide to Flexbox to learn how to use flex. Generally I use flex to arrange container elements but don't use flex for the smaller elements of your page like paragraphs of text. I also needed to add height: 100% to html. Get very friendly with your browser developer tools to see which elements are not arranged the way you expect them to be.

html {
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(225, 225, 225);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#header {
  position: relative;
  background-color: white;
  text-align: center;
  border-color: rgb(93, 87, 87, 0.5);
  color: rgb(93, 87, 87);
  border-bottom-style: solid;
  border-width: 1px;
}

p {
  margin-top: 0;
  padding: 5px;
  font-size: 48px;
}

#navbar {
  margin: 0;
  position: relative;
  font-weight: bold;
  color: rgb(93, 87, 87);
  padding: 5px;
  align-items: center;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#navbar li {
  width: 160px;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  list-style: none;
}

.content-wrap {
  flex: 1;
  display: flex;
  flex-direction: row;
}

#second__navbar {
  background-color: white;
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

#second__navbar li {
  display: block;
  font-size: 20px;
  margin: 10px 0;
}

.content {
  margin: 1em;
}

<!DOCTYPE html>
<html>

<body>
  <div id="header">
    My Name
  </div>
  <div>
    <ul id="navbar">
      <li>TITLE</li>
      <li>TITLE</li>
      <li>TITLE</li>
      <li>TITLE</li>
    </ul>
  </div>
  <div class="content-wrap">
    <ul id="second__navbar">
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
    </ul>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </div>
  </div>
</body>

</html>

How can I position my div at the bottom of its container?

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {  height: 100px;  border: 5px solid #000;  display: flex;  flex-direction: column;}.child {  height: 40px;  width: 100%;  background: #f00;  margin-top: auto;}

<div class="parent">  <div class="child">Align to the bottom</div></div>