HTML CSS 100 % 높이 문제 - JQuery 모바일 패널 예제

Question

HTML/CSS를 통해 크기에 관계없이 화면의 전체 높이 사용에 관한 게시물이 수없이 많습니다. 그러나 일반적으로 누군가는 전체 웹 페이지가 머리말/꼬리말과 신축성있는 가운데로 배치되기를 원합니다. 나는 전체 페이지가 아닌 컴포넌트가 이것을 필요로하는 실제 예제를 게시하는 것이 좋을 것이라고 생각했다.

나는 JQuery Mobile 패널에 채팅 클라이언트를 만들려고한다고 생각했습니다. 버튼을 눌렀을 때 오른쪽에서 좋은 느낌의 패널이 튀어 나와 메시지를 입력하고 보내기 버튼을 누르고 패널을 닫습니다.

는 여기 JFiddle 그리고 코드는 아래 다음과 같습니다 :

http://jsfiddle.net/7G8JK/9/

나는 JQuery와 모바일에 새로운 해요 그래서 패널의 스타일은 원하는되는 많은 나뭇잎. 하지만 너는 내가 그걸 가지고 갈 곳을 얻는다. 이 시점의 가장 큰 장애물은 채팅 메시지를 표시 할 영역 인 중간의 흰색 영역 인 클래스 "messagesdiv"입니다. 가능한 모든 높이를 채우기 위해 스트레칭하고 싶습니다. 본질적으로 어떤 크기의 하드 코드도하지 않으려합니다 (현재 해당 영역은 242x200로 하드 코딩되어 표시됩니다). 이것이 가능한가? 그렇다면 어떻게?

HTML :

이

<!-- rightpanel3 --> 
<div data-role="panel" id="rightpanel3" data-position="right" data-display="overlay" data-dismissible="true" data-theme="a"> 

    <div class="containerchat"> 
     <div class="headerchat">CHAT</div> 
     <div class="bodychat"> 
      <div class="messagesdiv"></div> 
     </div> 
     <div class="footerchat" data-role="fieldcontain">         
      <input type="text" id="text" name="name" value="" data-role="none"> 
      <input id="btnSendMsg" type="button" value="Send" data-corners="false" data-inline="true"/> 
     </div> 
    </div> 

</div><!-- /rightpanel3 --> 


<!--Rest of the page--> 
<div data-role="header"></div> 

<div data-role="content"> 
     <a href="#rightpanel3" data-role="button" data-inline="true" data-mini="true">Overlay</a> 
</div> 

<div data-role="footer"></div> 

CSS :

.headerchat { height: 30px; background: #0000FF; color: white } 
    .bodychat { background: #333333; } 
    .messagesdiv { width: 242px; height:200px; background: white } 
    .footerchat { background: #999999; } 
    #text { 
     width: 100px; 
    } 

Answer 1

당신은 사용할 수 있습니다 CSS의 절대 위치 지정 (ui-panel-in

다음

.ui-panel .ui-panel-inner, containerchat { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0px; 
} 
.headerchat { 
    position: absolute; 
    top: 15px;left: 15px;right: 15px; height: 30px; 
    background: #0000FF; color: white; 
} 
.bodychat { 
    position: absolute; 
    top: 46px; bottom: 61px; left: 15px; right: 15px; 
    background: #333333; 
} 
.messagesdiv { 
    width: 242px; 
    height:100%; 
    background: white 
} 
.footerchat { 
    position: absolute; 
    bottom: 0px;left: 15px;right: 15px; height: 60px; 
    background: #999999; 
} 
#text { 
    width: 100px; 
} 

이 당신의 jsFiddle 위의 CSS로 업데이트됩니다 : http://jsfiddle.net/ezanker/7G8JK/13/

Answer 2

이 .CSS 시도가 - 나를 위해 작동합니다. 어쩌면 당신은 귀하의 사이트에 정확히 맞게 div 높이를 가지고 놀아야 만 할 것입니다.

당신은

CSS 사이트의 기본 높이를 상속하는 다른 요소를 잊어 버린 :

.headerchat { height: 30px; background: #0000FF; color: white } 
.bodychat { background: #333333; height:100%;} 
.messagesdiv { width: 242px; height:100%; background: white } 
.footerchat { background: #999999; } 
#text { width: 100px;} 
.containerchat, div[data-role="panel"], div[data-role="panel"] .ui-panel-inner { 
    height:100%; 
} 

JSFIDDLE :

http://jsfiddle.net/7G8JK/12/