CSS로 크기 조정이 가능한 jQuery 대화 상자에서 수직으로 유연한 상자

Question

CSS를 사용하여 원하는 레이아웃을 구현하는 방법이 간단합니까?

 jQuery dialog: 

== Heading ================== 
|       | 
|  Comment list  | <-- Flexible height 
|       | 
----------------------------- 
|  New comment input  | <-- Fixed height 
|================ [close] ==| 

레이아웃은 주석 목록과 새 메모 입력의 두 영역이 수직으로 쌓인 jQuery 대화 상자입니다. 대화 상자의 크기를 재조정 할 수 있으며 높이가 커지거나 줄어들면 주석 목록의 높이를 적절히 변경하고 싶습니다. 새 주석 입력 영역 높이가 고정되어 있습니다.

기본적으로 주석 목록의 높이에서 입력 영역의 높이를 뺀 값으로 지정합니다.

제안 된 레이아웃은 (당신이 그것을 변경 될 수 있음) :

<div id="dialog"> 
    <div id="commentsList"> 
    </div> 
    <div id="newComment"> 
    </div> 
</div> 

는 IE8 + 및 기타 브라우저에서 작동 할 수 있도록

그래서 CSS와이를 달성 할 수 있습니까? 아니면 이미 jQuery UI를 사용하고 있는데, 아마 elegenat JS 솔루션이 있을까요?

Answer 1

이 작업을 시도 할 수 : 그것은 크롬 & IE9에서 작동 jsFiddle sample

가 (지금 IE8이 없습니다). 절대 위치 지정 대상에 대해 위쪽, 왼쪽, 오른쪽 및 아래쪽을 설정하여 고정을 사용합니다. 당신은 고정 된 위치를 포함하도록 jquery UI 스타일을 변경해야합니다. 대화 상자 안의 절대 위치가 바뀌 었습니다 .--)

코멘트 더 많은 도움이 필요하면,이 문제를 해결할 다른 아이디어를 갖기를 바랍니다.

Answer 2

내가 jQuery를 대화에 대해 알고하지 않으며, 어떤 효과가있을 것이지만, :

똑바로 마크 업이 일을한다면, 반드시 #dialog을하고 #commentList는 CSS에서 선언 된 높이가 없습니다 . 그런 다음 #newComment에 특정 높이 (예 : 45 픽셀)를 지정하십시오. 정상적인 HTML 흐름에는 필요에 따라 다른 두 div (#dialog 및 #commentList)가 커집니다. 즉, 기본적으로 높이가 "자동"으로 설정됩니다.

jQuery 대화 상자가 Firebug 또는 계산 된 스타일을 보여주는 유사한 개발자 도구를 사용하여 알 수있는이 기본값을 무시하는 경우 'height : auto;'를 다시 선언해야 할 수 있습니다. 그 선택자들.