Side DIV not extending 100% in height

Question

I have a layout that has a side menu bar and then the main content displayed on the right side. The layout and functionality work just fine except for one minor detail -

In some cases, there isnt enough content to fill the entire screen and when that happens the DIV containing the main content does not stretch and fill the remainder of the screen creating a visual difference as seen in the screenshot. I tried manipulating various attributes and putting in dummy content etc but could not find a clean solution. I am hoping someone can help. I am using Twitter Bootstrap 3.x

I have included the CSS for the main section, ideally, I would like this white background to fill the screen upto the footer.

/*
 * Main content
 */

.main {
    padding: 20px;
    background-color: #fff;
    border-left: 1px solid #dae3e9;
    height: 100%;
    box-shadow: -3px 3px 3px -2px #f1f1f3;
}

I have also created a fiddle with my code, the visual is a little messed up because the output is trapped inside a frame - but here it is anyway -

Answer 1

Dont use min-width: 100% ; on your #wrap. Basically solves the problem.

But i want the footer to still be at bottom etc... Fiddle

Added:

.main::before {
    content: "";
    position: absolute;
    z-index:-1;
    display: block;
    width: 100%;
    margin-left: -20px;
    height: 100vh;
    border: 1px solid black;
    background-color:white;
}

Suggestion: clean up your code. you don't need that much html code the design your doing. I't will be hell for any one who want to edit or change it at a later stage.