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布局高度太短

回答

相关问题