Seitenhöhe bei dynamischen Inhalten

greg · 1 Juli 2007

Liebe Community

,
bin eigentlich nicht der Typ, der sofort nach Hilfe schreit, aber die Zeit drängt und ich komm nicht mehr weiter. :neutral:

Folgendes. Ich versuche mich nun zum ersten mal an einer Ajax-Website. Bei jedem Klick auf einen Navigationspunkt, werden Ajax-Requests an den Server geschickt, der mit Content antwortet, der wiederum in DIV-Container geladen wird. Die DIV-Container haben, bis auf einen, feste Maße und zeigen nun fleissig den Inhalt an. Der Container mit dem Hauptinhalt jedoch variert in der Höhe, da die Serverantwort hierfür manchmal sehr lang und manchmal sehr kurz ausfällt. Dementsprechend verschluckt der Container manchmal Inhalte und machnmal ist er zu lang.

Lustigerweise verschluckt er die Inhalte nur nach einem Komplettrefresh der Seite und verhält sich nach paar Requests wieder, in der Hinsicht, so wie er soll. Das Problem mit der DIV-Überlänge bleibt jedoch.

Nun weiß ich garnicht, ob das ein CSS-Problem ist. Ich habe es mit absoluten und relativen DIVs probiert. Mit und ohne Tabellen. Ich habe das Ganze in ein Table gepackt, von der JS-Seite die Höhe gemessen und geändert. Letztendlich bin ich zu keinem vernünftigen Ergebnis gekommen und hoffe auf Tipps :)

Mein "Template" sieht gekürzt (im Moment) folgendermassen aus. Das DIV mit dem dynamischen Inhalt hat die ID 'main_content'.

PHP:

<body>
  <div id="news_teaser" class="news_teaser" style="display:none"></div>
  <table cellspacing="0" cellpadding="0" id="main_table" >
    <tr>
      <td height="203px"> 
         <div id="leiste_oben"></div>
         <div id="box_links"></div>
         <div id="box_rechts"></div> 
         <div id="leiste_unten"></div> 
         <div id="kette"></div>
      </td>
    </tr>
    <tr>
      <td> 
        <div id="menu_left"></div>
        <div id="menu_right"</div>
        <div id="main_content"</div>
      </td>
    </tr>
   <tr>
      <td height="15px" >  
        <div id="footer"></div>
      </td>
    </tr>
  </table>
</body>

Und nun noch die wichtigen Styles:

HTML:

html, body {
 height: 100%; 
}
body { 
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
#main_table {
 width:100%;
 height: 100%;
}
#main_table td{
 vertical-align:top;
}
#leiste_oben {
 position: relative;
 top: 0px;
 left: 0px;
 height: 15px;
}
#box_links {
 float:left;
 position: relative;
 top: 0px;
 left: 0px;
 height: 134px;
}
#box_rechts {
 float:right;
 position: relative;
 top: 0px;
 right: 0px;
 height: 134px;
}
#kette {
 position: relative;
 top: 0px;
 left: 0px;
 height: 26px;
}
#leiste_unten {
 clear:both;
 position: relative;
 top: 0px;
 left: 0px;
 height:28px;
}
#main_content {
 margin-top: 7px;
 margin-left:197px;
 margin-right:207px;
 margin-bottom: 7px;
 height:100%;
}
#menu_left{
 float:left;
 position:relative;
 height:100%;
 padding-top:7px;
 padding-left:9px;
}
#menu_right {
 float:right;
 position:relative;
 height:100%;
}
#footer {
 clear:both;
 position:relativ;
 top:0px;
 height: 16px;
}

Frank · 2 Juli 2007

gib dem div-container der den Inhalt anzeigt eine nicht relative breite und höhe (d.h. kein %). Dann kannst du mit overflow:auto; dein problem mit dem überlangen content lösen.

Ist der Content zu kurz, so bleibt der Div-Container weiter unten leer.
Ist der Content zu lang so kommt ein Scrollbalken zum vorschein mit dem der Inhalt gescrollt werden kann

greg · 2 Juli 2007

Hallo Frank, danke für Deinen Tipp. :-D

Wenn ich die 100% aus dem main_content rausnehme, dann erscheint im Firefox alles so wie es soll, der Inhalt wird also unten nicht mehr abgeschnitten, allerdings zerhaut mir das die Seite im IE, was ich wiederum überhaupt nicht verstehe. Anscheinend hab ich irgendwo noch nicht alles richtig. Im IE wiederum sieht alles mit height:100% gut aus.

Das Problem mit der "Überlänge" tritt nur auf, wenn ich davor eine Standardseite lade und dann auf eine kurze Ajax-Seite springe. Ich hoffe, dass ich das jetzt einigermassen rüberbringen kann.

Ich baue die Menüs mit Hilfe einer XML-Datei auf und lege auf jeden Menüpunkt einen Observer von Prototype, der durch einen click ausgelöst wird und die passende Anfrage an den Server stellt. In dem Menü unterscheide ich zwischen "Standard", "Ajax", "Extern" und "Popup", wobei letztendlich die beiden ersten von Bedeutung sind. Der Typ Standard baut die komplette Seite neu auf, der Typ Ajax platziert die Serverantworten in den dafür vorgesehenen Container. Die Überlänge tritt also nur dann auf, wenn ich nach dem Start, eine Standardseite aufbaue, die einen langen Inhalt hat und dann (nur vom menu_right aus) einen Ajax-Inhalt lade.

Dein Tipp mit overflow funktioniert sogar, allerdings lässt er den geladenen Inhalt in der Breite schrumpfen, bzw nur so groß werden, wie es unbedingt nötig.

Wahrscheinlich hab ich jetzt alle die das noch lesen verwirrt, aber es ist schwer es mit wenigen Worten zu erklären. Notfalls könnte ich das Problem mit der Überlänge so beheben, dass ich nur noch Ajax-Anfragen stelle. Das wäre wahrscheinlich sogar besser. Allerdings bleibt noch das Problem mit dem Abschneiden des Contents, bzw. dem unterschiedlichen Browserverhalten. :???:

Seitenhöhe bei dynamischen Inhalten

greg

Neues Mitglied

Frank

Neues Mitglied

greg

Neues Mitglied

Neueste Beiträge