jquery ui Layouthöhe ist zu kurz

Ich versuche, ein Layout zusammen mit jquery-ui-layout zu setzen und kann das Höhenproblem nicht überwinden.jquery ui Layouthöhe ist zu kurz

Hier ist der HTML-Code:

<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>

Es styles.css ist ich für alle Seiten verwenden (es ist ziemlich groß Vergangenheit in hier).

Die Javascript ich für diesen Einsatz ist ziemlich einfach, auch:

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

Aber der Ausgang ist, dass alle drei Platten so kurz wie pro Screenshot unten. Wie kann ich die Höhe des Layouts so anpassen, dass sie auf die gesamte Seite passt und bis zur Fußzeile reicht?

Quelle

2012-04-08 abolotnov

Der Screenshot zeigt nicht deutlich die Höhe, aber es ist kürzer als die Höhe einer Zeile. – abolotnov

Der Layout-Manager verwendet die Größe des Containers, um seine Layout-Logik festzulegen In diesem Fall haben Sie keine Höhe für den Inhalt div <div id="content">...</div> angegeben. So wie ein kleines Beispiel CSS wie so ändern:

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

Wenn Sie den Inhalt fill den Raum zwischen der Kopfzeile haben wollen und Fußzeile Sie zwei Layouts eines für Norden (Header) verwendet werden sollen, in der Mitte (Inhalt), Süden (Fußzeile) und wieder in Ihrem Inhalt wenden Sie ein zweites Layout für Ihre West-, Mittel-, Ostverkleidungen an.

Quelle

2012-04-08 13:08:59

fantastisch, vielen dank :) – abolotnov

jquery ui Layouthöhe ist zu kurz

Antwort

Verwandte Themen