Stretch the sidebar to full height of the page

Question

I have this: http://jsfiddle.net/s75ew662/7/

How can I stretch the left sidebar (gray) to the full height of the page?

.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}

<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

Answer 1

The simplest way based on your current code is to use viewport units.

.sidebar {
    height: 100vh;
}

body {
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
    height: 100vh;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}

<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

If you need to support older browsers, you could do this instead.

html, body, .container{
    height: 100%;
}
.sidebar {
    min-height: 100%;
}

html, body, .container{
    height: 100%;
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
}
.sidebar {
    width: 200px;
    background: lightgrey;
    float: left;
    min-height: 100%;
}
.content {
    background: lightblue;
    float: left;
    width: 550px;
}

<div class="container">
    <div class="sidebar">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

In order to fix the the scrolling + overflow issues when the content is taller than the sidebar. Some slight markup changes would be needed, see the JsFiddle demo.

html, body, .container {
    height: 100%;
    margin: 0;
}
.container {
    width: 750px;
    margin: 0 auto;
    display: table;
}
.sidebar {
    display: table-cell;
    width: 200px;
}
.content {
    display: table-cell;
    width: 550px;
}
.sidebar .inner {
    height: 100%;
    background: lightgrey;
}
.content .inner {
    background: lightblue;
}
.content .inner div {
    height: 100px; /*testing*/
}

<div class="container">
    <div class="sidebar">
        <div class="inner">
            <div>1</div>
            <div>2</div>
        </div>
    </div>
    <div class="content">
        <div class="inner">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</div>