Anhaltende Kopf - & Fußzeile

Ich habe zwei divs mit width 100%. Ich will eins sein, immer auf alle Inhalte, und ich will der zweite sein, immer auf der Unterseite alles. Wie kann ich dies tun? Vorzugsweise in reines CSS, aber ich werde versuchen jQuery/JS-Lösungen, wenn ich muss.

Ich habe versucht, das hinzufügen der header mit include("header.php"); und header.php enthält nur den HTML-code der header. Jedoch, es funktioniert nicht, sondern setzen, dass die genauen code an die Stelle der include funktioniert einwandfrei. Wie kann ich dieses Problem beheben?

InformationsquelleAutor AKor | 2011-02-14
  1. 3

    Können Sie beginnen, mit position:fixed und definieren entweder die Eigenschaften top und left oder bottom und left-Eigenschaften.

    Check-out CSS " sticky footer während Sie gerade dabei sind (link veraltet).

    Einen neuen sticky-Positionierung wurde in CSS. Ein stickily positionierte element behandelt wird, als relativ positioniert, bis es über eine festgelegte Schwelle, an welcher Stelle es wird behandelt, als fest, bis es erreicht die Grenze von seinen Eltern. Mit fest-und sticky-Positionierung, die Sie umsetzen können Kopf-und Fußzeilen, immer auf alles andere.

    Sticky-Positionierung möglicherweise nicht auf alle browser-Versionen, die die Endbenutzer möglicherweise verwenden. Für die Erreichung sticky footers in älteren Browsern-do-check - Wie man einen sticky footer mit CSS?

    • sieht aus wie http://www.cssstickyfooter.com ist nicht mehr up. Vielleicht wollen Sie etwas über diesen link...
    • CSS-support für sticky-Elemente verbessert hat in den letzten 6 Jahren. CSS unterstützt derzeit position:sticky out-of-the-box. Die Positionierung wird unterstützt von mit der neuesten browser-Versionen. Zur Unterstützung älterer browser-Versionen, die Sie möglicherweise ratsam zu prüfen, eine spätere stackoverflow-Frage des sticky footers stackoverflow.com/questions/29069498/.... Vielen Dank für die Zeit nehmen, um darauf hin ein veraltetes Antwort!
    InformationsquelleAutor Aleksi Yrttiaho
  2. 3

    Mit position:fixed und entweder oben oder unten Beispiel.

    <head>
    <title>Example</title>
    <style>
#top {
    color: white;
    width: 100%;   
    background-color: black;

    top:0px;
    position: fixed;   
}

#bottom {
    color: white;
    width: 100%;   
    background-color: black; 

    bottom:0px;
    position: fixed;   
}

#content {
    padding-top: 10px;   
}
    </style>
</head>

<body>
    <div id="top">top header</div>

    <div id="content">content</div>

    <div id="bottom">bottom footer</div>
</body>

    - Im Auge behalten

    ...dass flash-Anwendungen werden in der Regel erscheinen über Elemente wie diese. Um dies zu umgehen, verwenden Sie die wmode="transparent" Attribut im Objekten/embedd. Beispiel:

    <object>
    <param name="movie" value="example.swf" /> 
    <param name="wmode" value="transparent" /> 
    <embed src="example.swf" wmode="transparent"></embed>
</object>
    InformationsquelleAutor Shaz
Schreibe einen Kommentar