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

css

Solution

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/

Problem

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

Original source