css - CSS の高さ 100% は、jquery のスライド/ショーの背景色を尊重しません

Question

私はこのコードを持っています:

<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();
});

そしてCSS：

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

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

これで、「テキスト」をクリックすると、「p」がそのテキストとともに表示されるはずです。背景色が機能しないのはなぜですか? 色でdivを展開したい

Answer 1

height: autoまたはheight: auto !importantとを追加する必要がありますmin-height: 100%;

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

jsfiddle を参照してください: http://jsfiddle.net/AfRH2/7/

Answer 2

を削除すると、height: 100%すべてのテキストが表示される前に赤い背景が表示されません。に変更するmin-height: 100%と、問題が解決します（少なくともフィドルでは解決します）。

Answer 3

divをheight:100%;外します。#left