css layout not displaying correctly - html

Question

I have an application which I am trying to layout. Everything is fine apart from the left column content. It should display 100% of the height of the parent container, the same height as the right column.
#Container is the outer container.
#TreeList is the left column.
#Tabcontrol is the right column.
This is what my app looks like right now:
And here is the current css for my app:
html {
font-family: Open Sans, Calibri, Arial;
margin: 0 auto;
width: 1500px;
}
body {
}
#Container {
float:left;
width:100%;
position:relative;
border:1px solid black;
}
#TreeList {
position:relative;
border-bottom: 1px solid #707070;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
float:left;
overflow:hidden;
padding: 20px;
}
#TabControl {
position:relative;
border:1px solid #707070;
overflow:hidden;
float:left;
padding: 20px;
}

Answer 1

height: 100%; does not work like some would expect, you need a given height (em,%,px,etc..) on the parent element. In this case Your body I suppose. Add this to your css:
html, body{
height: 100%;
}
If you need a flexible parent container height there are several workarounds to achive that:
#1 Flexbox
You might take a look here: Flexbox Guide, works pretty neat, with the downside of browser support.
#2 Absolute positioning
Give the parent position: relative; And your element position: absolute; top: 0, bottom: 0; left: 0; for example.
#3 jQuery Plugin: matchHeight
This plugin does the job as well: matchHeight, only requires jQuery included and javascript to run

Answer 2

You haven't set any height in your css document, therefore all of the heights are pretty much random. First off set a main height for your body & html and then for the container like so:
html, body {
height: 100%;
}
#Container {
float:left;
width:100%;
position: relative;
border:1px solid black;
height: 100%;
}
Then for your other elements:
#TreeList {
position:relative;
border-bottom: 1px solid #707070;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
float:left;
overflow:hidden;
padding: 20px;
height:100%;
}
#TabControl {
position:relative;
border:1px solid #707070;
overflow:hidden;
float:left;
padding: 20px;
height: 100%;
}
Or if you prefer you could use position: absolute; for your child element and do something like this:
child {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 100px;
}
Which will make the elements stretch to the entire screen and keep a width you choose.
This should work, although I highly recommend using Javascript to set the height for body as well as position: absolute; instead of relative;

Answer 3

Add 100% height to the left column.
#TreeList { height:100% }