6

我有这个代码：

<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 用颜色扩展

在此处输入图像描述

4

3 回答 3

10

您必须添加height: autoorheight: 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/

于 2012-04-11T23:45:44.190 回答
4

如果您删除，height: 100%那么在显示所有文本之前您不会获得红色背景。将其更改为min-height: 100%它可以解决您的问题（至少在小提琴中确实如此）。

于 2012-04-10T19:00:06.410 回答
0

取下div height:100%;。#left

于 2012-04-10T18:56:42.083 回答