Problem beim Erstellen eines bildlauffähigen Inhaltsbereichs mit prozentualer Höhe

Wir erstellen eine Webseite mit Kopfzeile, Inhalt und Fußzeile. Die Kopf- und Fußzeile sollte jederzeit sichtbar sein und der Inhalt sollte scrollbar sein. Der Container div hat eine feste Breite, aber keine feste Höhe. Ich löste das Problem, die Fußzeile am Ende zu halten, indem ich css sticky footer benutzte (http://ryanfait.com/sticky-footer/) Der Inhaltsbereich ist in zwei Teile (content1 und content2) geteilt und hat ein flexibles scrollbares div.Problem beim Erstellen eines bildlauffähigen Inhaltsbereichs mit prozentualer Höhe

Das Problem ist, die Höhe des Inhaltsbereichs ist nicht absolut definiert (d. H. 100%). Wir möchten, dass wenn die Daten in content1 oder content2 die Bildschirmgröße überschreiten, es automatisch in einen eigenen unabhängigen scrollable Balken überläuft und die Kopf- und Fußzeile sichtbar bleiben.

Wir möchten vermeiden, iframe zu verwenden. Gibt es eine Möglichkeit, können wir es mit Javascript (jquery oder andere) tun? Wir sind sehr inspiriert von der Homepage von Goole Docs.

Jede Hilfe würde sehr geschätzt werden.

Choesang :)

Quelle

2009-07-29 tchoesang

Bevor Sie den Inhalt zeigen Sie es zu einem div anhängen könnte, die des Bildschirms positioniert ist. Nehmen Sie dann die Höhe des Inhalts und arbeiten Sie abhängig von der Größe des Client-Ansichtsfensters, wenn es scrollbar sein muss. Dann nehmen Sie den Inhalt aus dem Off-Screen-Div und an Ihr Haupt-Div mit der Höhe für das Ansichtsfenster und Überlauf: Auto.

Quelle

2009-07-29 18:45:48 redsquare

Hey Choesang, redsquare, hier ist eine andere Möglichkeit, wie Sie es tun können, ohne etwas vom Bildschirm zu entfernen.

Suchen Sie zuerst die Höhe des Ansichtsfensters, mit dem Sie arbeiten müssen, wir nennen das 'viewportHeight'. Wenn der Inhalt Ihrer Kopf- und Fußzeile bereits festgelegt ist, haben sie eine Höhe. Berechnen Sie ihre Höhen und fügen Sie sie zusammen, wir nennen das "usedHeight". Die Höhe, in der Sie den Inhalt ablegen können, ist: restingHeight = viewportHeight - usedHeight;

Wenn Sie die css -Eigenschaft in Ihrem Inhaltscontainer auf height = restingHeight und overflow-y = auto setzen, nimmt Ihr Inhalt immer mindestens die minimale Inhaltshöhe ein. Wenn zu viel Inhalt vorhanden ist, erzwingt er Bildlaufleiste erscheint.

Wir werden die Prototype-Bibliothek verwenden, um uns zu helfen, aber wir könnten genauso gut jQuery verwenden oder sogar den Code schreiben, um die Höhen selbst zu berechnen.

Beachten Sie im Körper, dass ich die Höhe auf 100%, sowie die Polsterung auf 0 und den Rand auf 0 setzen. Die meisten Browser legen eine 10px Polsterung um den Körper und dies wird dazu führen, dass Ihre Fußzeile angezeigt wird der Bildschirm in dem Prozess, den ich zeige.

 
<html> 
<head> 
<script type='text/javascript' src='prototype.js'></script> 
</head> 
<body style='height: 100%; padding: 0; margin: 0;'> 
<div> 
    <div id='header'>header text</div> 
    <div id='content'>content text</div> 
    <div id='footer'>footer text</div> 
</div> 
<script type='text/javascript'> 
    // Here we will set the text of the content, calculate its height, 
    // and set the max height. In production I would use less lines, 
    // for here writing each step out for clarity. 
    var viewportHeight = document.viewport.getHeight(); 
    var headerHeight = $('header').getHeight(); 
    var footerHeight = $('footer').getHeight(); 
    var usedHeight = headerHeight + footerHeight; 
    var remainingHeight = viewportHeight - usedHeight; 

    // we have our remaining height, now set the style. 
    $('content').setStyle({ 
    'height': remainingHeight, 
    'overflow-y': 'auto' 
    }); 

</script> 
</body> 
</html>

Quelle

2009-07-29 20:24:31

Sie werden prolly möchten ein Fenster Resize-Listener hinzufügen, so dass Sie die Höhe des Inhalts korrigieren können, wenn die Ansichtsfenstergröße ändert. – daniellmb

Problem beim Erstellen eines bildlauffähigen Inhaltsbereichs mit prozentualer Höhe

Antwort

Verwandte Themen