100% Height Div and Overflow:Auto

set the overflow:auto with height 100%

This is close to the solution you are looking for, though you may need to adjust the padding and such for a more aesthetically pleasing look: http://jsfiddle.net/GJ5yM/

New CSS:

    .content{
        height:100%;
        position: absolute;
    }
    .windowcontent{
        background-color: white;
        padding: 10px;
        max-height:100%;
        position:relative;
        overflow-y:auto;
    }

div with 100% height and overflow:auto

This will be pretty close to what you're looking for it sounds like: jsFiddle.

I actually only changed one thing: ~~height: 100%~~ to height:100vh.

div {
    padding: 0px;
    margin: 0px;
    border: 0px;
    height: 100vh;
}

vh is setting it to 100% of the viewport height. It's a new CSS3 unit. Using it just depends on what sort of compatibility you need with it. All major modern browsers support it. And it seems to have pretty good support for a few generations back: caniuse.com.

CSS-tricks.com has a good article about Viewport Height.

Content overflows from div with 100% height

padding will mess up height: 100%. It seems to calculate the height and then add the padding so the resulting height is actually closer to 120%. I tried this code in a local html file and it seems to do the trick.

Try this instead:

<html>
<head>
<style>
    body, html {
        margin: 0;
        padding: 0;
    }
    html { 
        background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed; 
        background-size: cover;     
    }
    #main {
        margin-left: 20%;
        margin-right: 20%;
        background-color: white;
        height: 100%;
    }
    #content {
        padding: 10%;
    }
</style>
</head>
<body>
    <div id="main">
        <div id="content">
            <h1>The Road Not Taken</h1>
            Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
            <p>- Robert Frost</p>
        </div>
    </div>
</body>
</html>

overflow (scroll) - 100% container height

Here's CSS styling to accomplish this:

#container {    width: 500px;    border: 3px solid red;    margin: 0 auto;    position: relative;}
#sidebar {    position: absolute;    left: 0;    top: 0;    width: 150px;    height: 100%;    background-color: yellow;    overflow-y: scroll;}
#main {    margin-left: 150px;}
p, ul {    padding: 10px;}

<div id="container">    <div id="sidebar">        <ul>            <li> line 1 </li>            <li> line 2 </li>            <li> line 3 </li>            <li> line 4 </li>            <li> line 5 </li>            <li> line 6 </li>            <li> line 7 </li>            <li> line 8 </li>            <li> line 9 </li>            <li> line 10 </li>            <li> line 11 </li>            <li> line 12 </li>            <li> line 13 </li>            <li> line 14 </li>            <li> line 15 </li>            <li> line 16 </li>            <li> line 17 </li>            <li> line 18 </li>            <li> line 19 </li>            <li> line 20 </li>        </ul>    </div>    <div id="main">        <p>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. </p>    </div></div>

Overflow auto with height 100%

The problem with your attempt is that to use a percentage height then the element needs to belong to a parent with a fixed height. There are a couple of ways to fix a height, but as you need it to fill the screen then I would recommend the following HTML:

<div class="fixed">
    <div class="active">
    </div>
</div>

With this additional CSS:

div.fixed{
    position:absolute;
    top:2px;
    bottom:2px;
    left:2px;
    right:2px;
}

Note that I used 2px to make it more obvious that it works in the demos below, use whatever you need)

Then you can use your original CSS:

div.active{
    height: 100%;
    overflow: auto;
    border:1px solid black;
}

Here is a working example, and one with content

How To Make Div With 100% Height Extend into Scroll Overflow in HTML/CSS?

It is very good for your task to use the rules of flexibility. Add display: flex and flex-flow: wrap for #container. And remove the height: 100% from the children, because flex-flow: wrap itself will stretch the elements to the full height.

Also, remove float: left and overflow: visible from children.

#container {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    overflow: scroll;
    color: white;
    background: gray;
    display: flex;
    flex-flow: wrap;
}

#part1 {
    width: 50%;
    margin: 0;
    background: blue;
    /*height: 100%;
    float: left;
    overflow: visible;*/
}

#part2 {
    width: 50%;
    margin: 0;
    background: green;
    /*height: 100%;
    float: right;
    overflow: visible;*/
}

<div id="container">
    <div id="part1" contenteditable="true"></div>
    <div id="part2" contenteditable="true"></div>
</div>

Vertical scroll on 100% height div

That´s because you need a heigth for .content-table try including this CSS height: calc(100% - 100px);

How to get height 100% in overflow parent

CSS grid can do this:

.main{
  display: grid;
  grid-template-columns:auto 1fr;
  background: #09f;
  max-height: 100px;
  overflow-y: scroll;
}

.left{
  background: #ef5523;
  height: 200px;
}

.right{
  background: #99ff99;
}

<div class="main">
  <div class="left">Left List</div>
  <div class="right">Right List</div>
</div>

CSS - DIV not scrolling to the bottom, when height is 100%

There are different ways to achieve this.

1. Using calc. Where 67px is the height of the header.

Changes:

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

section#mobile-menu {
  width: 100%;
  height: calc(100% - 67px);
  background: #fff;
  z-index: 999;
  display: none;
  overflow-y: scroll;
}

2. Making your header position:absolute; and give the body padding-top:67px;.

DEMO