Hi Welcome to Sitepoint
Your code above is doing exactly as you have told it and the elements have a height of 150px, 400px and 300px respectively exactly as you have specified. What else did you expect to happen?
CSS does what you tell it (most of the time) and if you set fixed heights on your containers then that's what you get:) I don't see how your question relates to the viewport and what it has to do with your code above. The code above has nothing to do with how tall the viewport is and will not react to it except to apply vertical scrollbars when the content is below the fold.
It is unlikely that your approach of fixed heights is going to be of any use to you as CSS is mainly about letting content dictate the height of elements and not setting them in stone to begin with unless its for a fxed height image or similar. For text content you should let the page grow and shrink with the content.
I think that you may be looking for a sticky footer approach but that is not as simple and straight forward as it may seem. See the CSS Faq (in my sig) for a link to the sticky footer faq for more information on how this is achieved. The drawback is that the footer must be a fixed height.
When designing with css you should let the content dictate to some extent how the page will behave so get some html structure and content in place first and then you can decide how to display it. Try to let things live and breathe on the page and don't confine fluid text to fixed height elements as that is a recipe for disaster.
Maybe if you can explain what you really need then we can point you in the right direction a little better