css height 100% does not honor the background color on slide/show in jquery

Question

i have this code:

<div id="left">
    <div>text</div>
    <p>
        text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br>
    </p>
</div>

js:

$('div').click(function() {
    $('p').show();
});

and css:

html, body {
    height: 100%;
}
#left {
    background: red;
 height: 100%;   
    width: 200px;
}
p { display: none; }

-- http://jsfiddle.net/AfRH2/1/

now, when you click on "text" the "p" should appear with its text. why my background color does not work? i want the div to expand with the color

Answer 1

You have to add the height: auto or height: auto !important and the min-height: 100%;

html, body {
    height: 100%;
}
#left {
    background: red;
    height: auto !important;
    min-height: 100%;
    width: 200px;
}
p { display: none; }

see the jsfiddle: http://jsfiddle.net/AfRH2/7/

Answer 2

If you remove the height: 100% then you don't get the red background before all the text is shown. Change it to min-height: 100% and it solves your issue (at least it does in the fiddle).