text

text
tex...">

Clever Geek Handbook

Css height 100% doesn't respect background color on slide / show in jquery

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 hit "text" the "p" should appear with its text. why is my background color not working? I want the div to expand with color

enter image description here

+3


source to share


3 answers


You must add height: auto

or height: auto !important

andmin-height: 100%; 

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


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

+7


source


If you delete height: 100%

, you won't get a red background before all the text is shown. Change it to min-height: 100%

and it solves your problem (at least it does it on fiddle).



+2


source


Take out height:100%;

from div #left

.

0


source






More articles:


All Articles