Change element style without JavaScript
Is there a way to change CSS style for specified element without using JavaScript?
I don't want to use JS because of some browsers which do not support, or hav开发者_如何学Ce disabled it...
Concrete example:
I have 2 DIVs (#menu
and #content
) and I want to set min-height
CSS property of #content
to actual height
property of #menu
(so if the #menu
would be longer than #content
, #content
's and #menu
's heights would be equal). You problem can be solved with simple plain CSS. For the purpose of demonstration I am going to assume that you have a menu on the left side of your web page and with the rest of the page to follow its height. That behavior is easily achieved by combining floats and overflows.
HTML
<div class="content">
<ul class="menu">
<li><a href="/">Homepage</a></li>
</ul>
<p>Hello world!</p>
</div>
CSS
.content {
width: 98%;
overflow: hidden;
}
.menu {
float: left;
width:30%;
}
The trick is in using overflow:hidden
on the outside wrapper which will make the content height always adjust to the height of the menu.
精彩评论