Div动态高度

Question

我有 HTML 代码：

<div id="container">
    <div id="feedbackBox"></div>   
</div>

#feedbackBox div 最初没有出现。

CSS 是集中div：

#container {
    position: absolute; width: 380px; height: 360px; left: 50%; top:50%; padding: 30px;
    margin-left: -220px; margin-top: -210px; 
} 

但我需要通过jQuery更改 #feedbackbox 的height。

我测试过它并不起作用：

.expandInfo {
    height: 500px;
    margin-top: -221px;
}

$("#container").removeClass().addClass('expandInfo');

但它不起作用！ CSS类不适用，更不用说重新完成（计算），以便div保持集中。

Answer 1

由于选择器的优先级不同，高度不会改变。 （http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector）

您可以按ID 设置 #container 的高度。 .expandInfo 的高度由类定义。但在CSS中，ID选择器的优先级高于类选择器。

试试：

#container.expandInfo {
    height: 500px;
    margin-top: -221px;
}

此选择器具有ID优先级和类优先级。它将覆盖#container

的高度

Answer 2

这里有一个例子 http://codepen.io/alfonsodev/pen/aKwiG

我已经看到你在css中使用#container然后删除了类。 因为容器没有任何类没有意义。

查看示例容器有一个类容器，然后单击，您可以显示该框并应用所需的类。