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%;關閉#left DIV的擴大。

Answer 3

如果您刪除了height: 100%，則在顯示所有文本之前，您不會顯示紅色背景。將其更改爲min-height: 100%，它解決了您的問題（至少它在小提琴中）。