In my most recent project - "Photographer Alina Reynbakh" I've faced with issue that if content of "block 1" is less in height than content of "block 2" we have left pink block only with height of it's content not the full available area.

Someone would tell me to do something like this in CSS file:
html {height: 100%;}
body {height: 100%;margin: 0;}
#container {position: relative;min-height: 100%;}
* html #container {height: 100%;}
#header {height: 150px;}
#footer {height: 150px;position: relative;margin-top:-150px;}
#left-block{min-height: 100%;}
* html #left-block{height: 100%;}
But this doesn't work. At least for me.

I would suggest you one of the tricks found by me in the internet unless by the time you are reading this article - CSS3 appears:
Use 1pixel height background image for the div container that is wrapping pink and blue blocks with repeat-y CSS style. EG:

<div style="background-image: url(pinkBg.gif); background-repeat: repeat-y;">
<div class="left-block">...</div>
<div class="main-content">...</div>
</div>

Where this pink background is just image that gives visibility of the left block full height but block itself might not be full height.

Another issue that may happen, has the same root - left block has element that should stick to the bottom of the page and it doesn't matter what size of the main content part.
Take a look:
In my design those "blots" should stick to the bottom of "block 1".
The only solution I found (actually a friend of mine has told me) is to do the same as above - place this image as a background into the wrapping div with background-position but without background-repeat for this time :).
So our example this will look like this:

<div style="background-image: url(pinkBg.gif); background-repeat: repeat-y;">
<div style="background-image: url(blots.png); background-position:left bottom;">
<div class="left-block">...</div>
<div class="main-content">...</div>
</div>
</div>

For all examples of working issues - feel free to check on Alina's site ;)

Happy coding :)