Machen HTML-Inhalte erweitern das Fenster füllen

Question

Ich habe eine HTML-Seite geteilt vertikal in

• Header
• Body
• Footer

Der Körper wiederum unterteilt horizontal in

• Ein großer DIV auf der linken Seite von Scrollbalken umgeben, um einen Teil eines Diagramms
Anzeigen
• Ein Formular rechts

Die Kopf- und Fußzeile sind feste Höhe. Der Körper sollte erweitern vertikal um den Teil des Fensters zu füllen nicht von dem Kopf- und Fußzeile besetzt.

Ebenso wird das Formular mit fester Breite und die Bildlauffenster sollte horizontal erweitern die Fensterbreite zu füllen.

Das Diagramm sehr groß (bis zu 10x10 Bildschirminhalten), so kann ich alle nicht angezeigt werden soll. Stattdessen möchte ich so viel wie möglich angezeigt werden (das gesamte Fenster verwendet wird), so dass der Benutzer so wenig wie möglich bewegen muss.

Ich kann auch kein Javascript verwenden, da einige Benutzer unbedingt paranoid sind und müssen sie deaktivieren.

Einige Optionen, die ich in Betracht gezogen haben:

• Eine Tabelle mit dem Bildlauffenster Zelle Höhe und Breite auf 100% gesetzt und alle andere auf 1%
  funktioniert nicht. Die Tabelle (und damit die Seite) erweitern das gesamte Diagramm enthalten, auch mit absoluter Positionierung auf dem Bildlauffenster DIV.
• Die absolute Positionierung die Scheibe aus dem unteren Bereich der Seite durch die Höhe der Fußzeile
  Arbeiten aber ungenau Offset: die Fußzeile der Höhe ist abhängig von der aktuellen Schriftgröße und ob Text gewickelt. Das bedeutet, ich muss einen großen Spielraum lassen, um sie sicherzustellen nicht überlappen.
• Legen Sie das Diagramm in einem IFRAME
  Die beste Lösung, die ich mit deaktiviert Skripte gefunden habe, aber begrenzt, was ich in Skripten tun kann, wenn sie ist aktiviert.

Ich bemerke, dass Google Maps verwendet eine feste Größe Bereich für die Karte, wenn Skripts deaktiviert sind. Wenn Google auf dieses Problem aufgegeben hat, bedeutet, dass es nicht machbar ist?

Answer 1

Mit der Höhe:. 100% CSS-Attribut sollte es funktioniert

Siehe

Dave Woods 100% Höhe Layout-CSS Mit für Sie arbeitet .

Answer 2

Es ist ein wenig bekannter Aspekt der position: absolute; CSS-Eigenschaft, die Ihnen das Layout von Ihnen gesuchten geben. Sie können absolut ein Element in allen 4 Richtungen, oben, rechts, unten und von links positionieren. Das bedeutet, eine Box kann als Browser als Flüssigkeit sein und bleiben immer die gleichen Abstand von den Rändern ist es Container, die Sie angeben.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

Ein Beispiel Besuche http://www.sanchothefat.com/dev/ Layouts / cssframes.html und dann sehen Quelle und auseinander ziehen die CSS zu sehen, wie es in einem komplexeren Beispiel getan hat.

Wenn Sie diesen Ansatz nehmen Sie unbedingt haben die Hauptbehälter <div>s ALL zu positionieren. Verwenden ems wenn font-size ist ein Anliegen.

PS. Es gibt eine Gotcha, dass IE6 vermasselt (Schock!) Aber das Beispiel, das ich zur Verfügung gestellt habe einen IE6 Rückfall hat. Nur eine feste Höhe jedoch in Ordnung sein wird.