How to Assign Percentage Values to Div to Divide Entire Page into 3 Parts with Body Height = Window's Height

How to assign percentage values to div to divide entire page into 3 parts with body height = window's height

Do you need something like this?

Demo

html, body {
    height: 100%;
}

div:nth-of-type(1) {
    background: #f00;
    height: 20%;
}

div:nth-of-type(2) {
    background: #00f;
    height: 70%;
}

div:nth-of-type(3) {
    background: #0f0;
    height: 10%;
}

I guess your solution will also work, but you must have missed out resetting default browser styles, use this in your CSS and you've missed out setting height: 100%; for html element too

* {
   margin: 0;
   padding: 0;
}

How to divide the height of an element on 3 elements?

I suggest to use flexbox, and don't forget to set .parent to height:100%.

The main advantages of using flexbox:

You don't have to deal with overflow problem, say there is more content in one row that couldn't fit 1/3 of the entire container height, it will simply expand the row automatically, and all the remaining free space will still be evenly distributed.
You can easily add or remove a row without changing the CSS, they will be evenly distributed based on the number or child divs.
If you need one or more rows to be shorter or taller, you can just use flex or flex-grow or flex-basis to adjust accordingly.
Plus, if you haven't heard of flexbox yet, you'll be amazed how powerful it is once you entered the flexbox world.

html,body {  height: 100%;  margin: 0;}
.parent {  height: 100%;  display: flex;  flex-direction: column;}
.child {  flex: 1;}

<div class="parent">  <div class="child">1</div>  <div class="child">2</div>  <div class="child">3</div></div>

css divide width 100% to 3 column

A perfect 1/3 cannot exist in CSS with full cross browser support (anything below IE9). I personally would do: (It's not the perfect solution, but it's about as good as you'll get for all browsers)

#c1, #c2 {
    width: 33%;
}

#c3 {
    width: auto;
}

How to split page into 4 equal parts?

Demo at http://jsfiddle.net/CRSVU/

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

div {
  width: 50%;
  height: 50%;
  float: left;
}

#div1 {
  background: #DDD;
}

#div2 {
  background: #AAA;
}

#div3 {
  background: #777;
}

#div4 {
  background: #444;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

How do I divide a page in three vertical sections?

First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:

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

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 25%;
    height: 100%;
    float: left;
    background-color: rosybrown;
    border-collapse: collapse;
}

.middlepane {
    width: 50%;
    height: 100%;
    float: left;
    background-color: royalblue;
    border-collapse: collapse;
}

.rightpane {
  width: 25%;
  height: 100%;
  position: relative;
  float: right;
  background-color: yellow;
  border-collapse: collapse;
}

.toppane {
  width: 100%;
  height: 100px;
  border-collapse: collapse;
  background-color: #4da6ff;
}

<div class="container">
  <div class="toppane">Test Page</div>
  <div class="leftpane">
    <h1>Test Page</h1></div>
  <div class="middlepane">Test Page</div>
  <div class="rightpane">
    <h1>Test Page</h1></div>
</div>

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

Percentage Height HTML 5/CSS

I am trying to set a div to a certain percentage height in CSS

Percentage of what?

To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.

So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.

If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.

(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)

Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):

div {
    height:100vh; 
}

See here for more info.

HTML div height greater than intended

You should understand how the box model works... You are using borders which are counted outside the element, so for example if your element is 200px in height, and has a 5px border, the total element size will be 210px;

Sample Image

So considering this as the concept, what you are having elements which sums up to 100%, and you are using borders too, so that is exceeding the viewport which will result in vertical scroll...

Also you don't have to use position: absolute;, you are making it absolute, just to avoid scrolls but that's a wrong approach. Absolute element is out of the document flow, and will give weird results if you didn't wrapped inside a position: relative; element.

Demo

Few Tips :

Use lowercase tags
Avoid Uppercase ID's unless required

Using 100% vertically is very rare, designers generally use width: 100%; for making the layouts responsive. So if you don't have any specific reason to go for 100% vertical elements, don't go for it..

Solution:

Still if you want to stick with the vertical layout spanning to 100% in height, you should use box-sizing: border-box; property...

What box-sizing will do here?
Well, using the above property, it will change the default behavior of the box-model, so instead of counting the borders, paddings etc outside the element, it will count inside it, thus it will prevent the viewport to be scrolled.

I will provide you an example, which I had made for another answer.

Demo 2 (Updated, had forgot to normalize the CSS)

Explanation for the above demo, if you look at the CSS, I am using

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

which will make every element paddings, borders etc to be counted inside the element and not outside, if you mark, am using a border of 5px; and still, the window won't get a scroll bar as the border is counted inside the element and not outside.

How to Assign Percentage Values to Div to Divide Entire Page into 3 Parts with Body Height = Window's Height