jquery UI 레이아웃 높이가 너무 짧습니다.

jquery-ui-layout과 함께 레이아웃을 넣으려고하고 있는데 높이 문제를 극복 할 수 없습니다.jquery UI 레이아웃 높이가 너무 짧습니다.

이

<body> 
<div id="wrapper"> 
    <div id="header"> 
     <a class="logo" href="/"> 
      <img src="/media/bdo.png" width="154" height="38"/> 
     </a> 
     <ul class="top-menu"> 
      <li><a href="/">report fill out</a></li> 
      <li><a href="/reports_browser/">browse reports</a></li> 
     </ul> 
     <div class="user"> 
      hi there 
      </div> 
    </div> 
    <div id="content"> 

    <div class="ui-layout-west" id="consultants">west</div> 
    <div class="ui-layout-center" id="contacts">center</div> 
    <div class="ui-layout-east" id="details">east</div> 

    </div> 
</div> 
<div id="footer"> 
    <ul class="links"> 
     <li><a href="#">help</a></li> 
     <li><a href="#">report an issue</a></li> 
    </ul> 
</div> 
</body>

나는 모든 페이지 (이 여기에 과거에 오히려 큰의) 사용 styles.css 있습니다 :

다음은 HTML 코드입니다.

나는이에 사용하는 자바 스크립트

도 오히려 간단하다

<script type="text/javascript"> 
$(document).ready(function(){ 
    myLayout = $("#content").layout({ 
     applyDefaultStyles: true 
    }); 
    myLayout.sizePane('west',500); 
}); 
</script>

그러나 출력은 모두 세 개의 패널이 아래의 스크린 샷에 따라 너무 짧은 것입니다. 전체 페이지에 맞게 레이아웃의 높이를 수정하고 바닥 글까지 계속 줄이려면 어떻게해야합니까? enter image description here

출처

2012-04-08 abolotnov

스크린 샷에 높이가 명확하게 표시되지 않지만 선의 높이보다 짧습니다. – abolotnov

레이아웃 관리자는 컨테이너의 크기를 사용하여 레이아웃 논리를 결정합니다. 이 경우 콘텐츠 div <div id="content">...</div>의 높이를 지정하지 않았습니다. 그냥 빨리 예로서 다음처럼 CSS를 변경 : 당신이 당신의 헤더의 내용 fill 공간을 갖고 싶어

#content { 
    float: left; 
    clear: both; 
    width: 100%; 
    height: 500px; 
    padding: 10px 0 20px; 
}

을하고 두 개의 레이아웃 북쪽 하나 (헤더), 센터 (컨텐츠)를 사용합니다 바닥 글, 남쪽 (바닥 글)을 선택하고 내용에 다시 서쪽, 중앙, 동쪽 패널의 두 번째 레이아웃을 적용합니다.

출처

2012-04-08 13:08:59

환상, 고맙습니다. :) – abolotnov

jquery UI 레이아웃 높이가 너무 짧습니다.

답변

관련 문제