dorfmopp: Text immer am unteren des Fensters, außer wenn ...

... er dabei andere Elemente überdecken sollte.

Ich habe eine Seite vorgegeben bekommen, welche am unteren Ende der Seite die üblichen Copyright-Hinweise zu stehen hat. Das Problem ist, dass diese auch bei großen Bildschirmen einfach verschwinden, obwohl zwischen besagter Tabelle und Hinweisen sehr viel Platz übrig ist.

Ich würde es gern so gestalten, dass, wenn man z.B. die Fensterhöhe reduziert, die Hinweise immer am unteren Rand angezeigt werden, bis der Abstand zwischen Tabelle und unterem Fensterrahmen eine kritische Höhe von - sagen wir mal - 200px unterschreitet.

Ist das möglich? Wenn ja, wie?

  1. Ist das möglich? Wenn ja, wie?

    Mit JavaScript:

    häng' dich an das resize-Event und überprüfe dort den Abstand. Erfüllt dieser bestimmte Kritieren, reagiere darauf.

    1. Ist das möglich? Wenn ja, wie?

      Mit JavaScript:

      häng' dich an das resize-Event und überprüfe dort den Abstand. Erfüllt dieser bestimmte Kritieren, reagiere darauf.

      Hab' ich mir schon gedacht, dass ich es auf Javascript hinausläuft ^^

    2. Ist das möglich? Wenn ja, wie?

      Mit JavaScript:

      häng' dich an das resize-Event und überprüfe dort den Abstand. Erfüllt dieser bestimmte Kritieren, reagiere darauf.

      Wobei ... es muss nicht unbedingt beim Verändern der Fenstergröße mitwandern. Gibt es mit CSS und div die Möglichkeit die Hinweise beim Öffnen der Seite am unteren Fensterrand anzeigen zu lassen? Außer wenn es sich mit bestehendem Inhalt überschneidet natürlich.

      Es würde ja sicher schon reichen, eine neue Zeile an die Tabelle zu hängen, dessen Größe bis zum unteren Fensterrand geht oder mindestens 200px groß ist. Aber leider funktionieren Prozentangaben bei der Höhe ja nich :<

      Gibts da vielleicht eine Javascriptfreie Variante?

      1. Gibts da vielleicht eine Javascriptfreie Variante?

        Das kommt darauf an, wie dein bisheriges CSS aussieht:
        Folgendes Layout produziert einen Footer am unteren Viewport-Rand, sofern der Platz ausreicht.

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
         "http://www.w3.org/TR/html4/strict.dtd">  
          
        <html>  
        <head>  
        <title>Layout</title>  
        <style type="text/css">  
        html{height:100%; min-height:100%;}  
        body{min-height:100%; margin:0; height:100%; background:green;}  
        body > *{position:relative;}  
        #header{ background:#ffe; height:50px; z-index:3; }  
        #content{ background:#fee; min-height:100%;margin:-50px 0; z-index:2;}  
        #content:before{display:block; height:50px; content: ' ';}  
        #footer{background:#ffe; height:50px;  z-index:3;}  
        </style>  
          
        </head>  
        <body>  
        <div id="header">Hier steht der Headbereich</div>  
        <div id="content"><h1>Inhaltsbereich</h1>  
           <p style="height:500px;background:red;">Textobjekt</p>  
        </div>  
        <div id="footer">Hier steht der Fussbereich</div>  
          
        </body>  
        </html>  
        
        

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Das funktioniert im IE 8 so leider nicht. Ich habe es jedoch anders gelöst.

          Danke trotzdem ;)

      2. Es würde ja sicher schon reichen, eine neue Zeile an die Tabelle zu hängen, dessen Größe bis zum unteren Fensterrand geht oder mindestens 200px groß ist.

        Das ist eine gänzlich andere Anforderung.

        Aber leider funktionieren Prozentangaben bei der Höhe ja nich :<

        Warum sollten die nicht funktionieren?

        Gibts da vielleicht eine Javascriptfreie Variante?

        Ja, dafür schon - Beat hat dir bereits eine genannt - für alles weitere Hilft die suche nach "Sticky Footer" in der Suchmaschine deiner Wahl.

        1. Warum sollten die nicht funktionieren?

          Weil ich mit ASP.Net arbeite. Die funktionieren schon, aber nicht mehr so, wie man's von HTML gewöhnt ist.

          Hab's letztendlich mit der Tabelle hinbekommen: Headerzelle(110px hoch), Inhalt(Resthöhe), Footerzelle(200px hoch)

          1. Weil ich mit ASP.Net arbeite.

            Das ist Unsinn.

            Die funktionieren schon, aber nicht mehr so, wie man's von HTML gewöhnt ist.

            Wenn du meinst.