开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜