You can never use height:100% in any meaningful manner apart from on the html and body elements to establish a 100% starting point. The css FAQ on 100% height (see my sig) explains the why and wherefore so I won't go into full detail here but the basics are that you can only set a percentage height on a parent that has a known height and doesn't depend on its content for its height.
Therefore 100% height is a non starter because even if it does work then it is limited to 100% and will never grow. The similar applies to min-height:100% in that it only works on a parent that has a height defined or else it just defaults to height:auto. In any case you don't want 100% you want something that starts from here and goes all the way to there - which is not 100% of anything.
The techniques you can use are faux columns (use a repeating background image on the main container to create the illusion of a column); use display:table for ie8+ and create css table cells which can equalise; use one of the negative margin float techniques; or use an absolute overlay.
If you only want to support IE8 plus you can do the absolute overlay method without adding any mark up:
Hope that helps
BTW your main container has no height because you didn't contain the floats.