jquery ui佈局高度太短

我試圖把佈局放在一起jquery-ui-layout並且無法克服高度問題。jquery ui佈局高度太短

這裏的HTML代碼：

<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我使用的所有頁面（這是相當大，過去到這裏）。

我用這個JavaScript已經相當簡單，太：

<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 2012-04-08 13:08:49

佈局管理器將使用容器的大小來確定它的佈局邏輯。在這種情況下，您尚未爲內容div <div id="content">...</div>指定任何高度。就像一個簡單的例子改變你的CSS像這樣：

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

如果你想有你的頭之間的內容fill的空間和頁腳，你應該使用兩種佈局之一以北（頭），中心（內容）南（頁腳），並再次在您的內容中爲西部，中部和東部的面板應用第二個佈局。

來源

2012-04-08 13:08:59

太棒了，非常感謝:) – abolotnov 2012-04-08 13:10:16

jquery ui佈局高度太短

回答

相關問題