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

Менеджер макета будет использовать размер контейнера для определения его логики компоновки. В этом случае вы не указали высоту для содержимого 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

jquery ui макет высота слишком короткая

ответ

Смежные вопросы