Menu
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
959
that is because you have set the background color, and then overwritten it by using the background shorthand…. either move the background-color call after the background shorthand, or add it TO the shorthand… the browser interprets your current code like this…
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
We can set a full-page background color by simply changing the screen height of an HTML body. In Tailwind CSS, we use an alternative of CSS background-color property which is represented as background-color-opacity ( eg: bg-blue-200 ) and it is used to specify the background color of an element.
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/
166
If you remove the height: 100% then you don't get the red background before all the text is shown. Change it to min-height: 100% and it solves your issue (at least it does in the fiddle).
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
