2013-08-10 3 views
0

나는이 HTML 코드가 있습니다.사업부의 높이를 동적으로

CSS는 DIV 중앙 집중화하는 것입니다

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

을하지만 jQuery를 통해 height의 #feedbackbox을 변경해야합니다.

나는 그것을 테스트하고 그것은 작동하지 않습니다

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

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

을하지만 그것은 작동하지 않습니다! CSS 클래스는 적용되지 않으며 div가 중앙 집중화 된 상태로 유지되도록 훨씬 더 적은 작업이 다시 계산되었습니다.

+1

CSS를 '# container'에 적용하고 div는 안에 넣지 않습니다. – putvande

+0

css 클래스 대신 ccs 클래스를 사용하는 경우 – Rooster

+0

margin-top : 0을 설정 한 다음 어떤 일이 발생하는지 봅니다 (CSS는 적용되지만 div는 화면에서 벗어난 것입니다). – jeff

답변

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 우선 순위 수준의 우선 순위를가집니다. 그것은 여기에 당신은 내가 당신이 CSS에서 #container를 사용하여 다음 클래스를 제거 본 적이
http://codepen.io/alfonsodev/pen/aKwiG

예를

+0

그레이트! 멍청 아! =]. 잘 지내라. – user2465422

0

#container의 높이를 우선합니다. 컨테이너에 어떤 클래스도 없으면 이해가되지 않습니다.

예제 컨테이너에는 클래스 컨테이너가 있으며, 클릭하면 상자를 표시하고 원하는 클래스를 적용 할 수 있습니다.

관련 문제