css-layout für die Fußzeile am unteren Rand mit dynamischen ajax-content Höhenänderung der Seite

[Update]

Ich tatsächlich gefährdet, zu diesem problem nun durch den Verzicht auf die fixen footer-design.

Scheint es, dass es kein problem mit dynamischen Inhalt, der sich in der Fußzeile und ändern der Größe Container entsprechend, es sei denn, die Fußzeile ist fest an den browser unten zunächst.

Ich hoffe, dass andere schließlich bieten eine große Lösung, umfasst das beste aus beiden Welten.

Ich verbrachte den ganzen Tag damit, um die Fußzeile auf der Seite nach unten verschoben, um Platz für dynamisch Hinzugefügt werden (per ajax) Inhalte. Ich brauche wirklich ein paar Tipps oder links, weil ich habe nicht gefunden was hilft.

Grundsätzlich:

Meine Website hat einige Seiten, die beginnen mit nur ein Textfeld und eine Schaltfläche, so dass die gesamte Höhe des content-Bereich ist nur ein paar Zentimeter unterhalb des Kopfbereichs.

Habe ich keine problem bekommen die sticky footer funktioniert so, dass die Fußzeile erscheint am unteren Rand des browser-Fenster, auch wenn es gibt sehr wenig Inhalt auf dem Bildschirm.

Gleichen css-layout funktioniert gut für andere Seiten, die einen Inhalt besitzen, erstreckt sich unterhalb des browser-Fensters.

Der Haken:

Den Inhalt gerendert werden muss, und übergeben Sie den browser mit der initial load.

Das Problem:

Inhalte, die Hinzugefügt, um die Seite per AJAX nach dem ersten laden Farben unten auf der Seite korrekt -- aber der footer bleibt in seiner ursprünglichen Lage.

Bitte sagen Sie mir, es gibt eine Lösung für dieses Problem.
Ich kann nicht post das css, bis die Prüfung mit meinem Chef zuerst - wenn möglich - und wenn nötig, werde ich später - aber es ist nur eine sehr einfache version von die viele sticky footer-css-Lösungen, die schwimmende rund um das web.

Dank.

InformationsquelleAutor m42 | 2009-10-09

2

Es klingt wie dein footer ist mit display: fixed oder ähnliches. Versuchen Sie, die Behälter von der Fußzeile zu:
```
bottom: 0;
display: block;
position: absolute;
```
Dass sichergestellt wird, dass es erscheint rechts unten was auch immer Behälter sitzt es innerhalb von (ich ' m vorausgesetzt, die <body> tag). Dein problem wird jetzt sichergestellt, dass es erscheint am unteren Rand des Bildschirm, anstatt den unteren Rand des Dokuments, die fängt sehr viel kürzer. Sie können dies erreichen, in ein paar Möglichkeiten, aber vielleicht das einfachste wäre, um eine minimale Höhe auf Ihre AJAX-content-container:
```
min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */
```
Der andere Ansatz ist, da Sie mit einer JavaScript-Bibliothek (nehme ich an?) nehmen Sie die erforderlichen Inhalte, könnten Sie vielleicht passen Sie auch die Höhe der AJAX-content-container oder ändern Sie die Fußzeile, CSS einmal, dass der Inhalt geladen wurde?
- Ich glaube, Sie sind ein fingerzeig auf die Lösung, die leider bedeutet, dass ich kann nicht einfach verlassen sich auf css. Die css, die Sie nicht lösen das problem - aber die Idee, dass werde ich ändern müssen, um die Höhen der Container durch den code wird wahrscheinlich mehr im Einklang mit, was erforderlich ist.
InformationsquelleAutor Phil.Wheeler
2

Derzeit behoben ähnliche situation mit kleinen jQuery und CSS, wobei parameter footer-div-Objekt (D. H. $("#mainfooter")):
```
function positionFooter(obj){
    if ($("body").outerHeight(true) > $(window).height()) {
        obj.css("position","relative");
    } else {
        obj.css("position","fixed");
        obj.css("bottom","0px");
    }
 }
```
Gebunden dieser Funktion $(document).ready und $(window).ändern der Größe.
Wenn ajax-Aufruf ändert die Größe des Körpers, dies sollte auch nach dem Inhalt laden.

InformationsquelleAutor andro83
0

Ohne code, das ist schwer zu sagen, was das problem sein könnte.

Jedoch, Im mit einem sticky footer wie hier beschrieben, das funktioniert sehr gut, auch wenn ich noch nicht Hinzugefügt, ajax-content. Browser Größenänderung funktioniert nur gut, obwohl.

InformationsquelleAutor jeroen
0

Verwenden include in PHP und nennen Sie die Fußzeile nach dem dynamische Inhalte wird angezeigt.

InformationsquelleAutor jewel
0

Ich bin mir nicht sicher, Sie sind auf der Suche für diese, aber ich bin auch vor dem gleichen problem vor und die gleichen CSS, wo mein Inhalt überschneidet sich in der Fußzeile werden mir beim Aufruf der ajax durch jQuery-Methode.

Nun fand ich die Lösung: einfach Nur die div-Höhe durch jQuery und wenden Sie die Höhe für das div, wo Sie zurückkehren und Ihre Ergebnisse von ajax.
```
var obj = $("#viewcomm").height(); 
if($.browser.msie) {
  $("#viewcomm").height(obj).css({cursor:"auto"});
}
```
wo ist hier viewcomm ist div-ID.

InformationsquelleAutor Abden

Ich gelöst gleiche Art von problem mit folgenden code, wo Inhalte ist die id des div, wo die php-Seiten laden-und Fußzeile ist die Fußzeile tag.

var footerAdjustId = setInterval(adjustFooter, 2000);

function adjustFooter(){
    $("footer").css("marginTop", $("#content").height() - $(window).height());
    clearInterval(footerAdjustId);
}

InformationsquelleAutor Haris ur Rehman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.