1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Web-App-Layout - Fester Kopf- und Fußbereich

Dieses Thema im Forum "Coders Talk" wurde erstellt von Carrear, 28. November 2016.

  1. Carrear

    Carrear Erfahrenes Mitglied

    Hey Leute,

    ich arbeite gerade an eine Web-Applikation.

    Es fiel mir jetzt schwer das unter CSS oder JS einzuordnen, deswegen eröffne ich das Thema hier.

    Im Konzept weist die Web-App einen feststehenden Kopf- und Fußbereich auf. D.h. nur der eigentliche Inhaltbereich ist scrollbar und Kopf und Fruß sind immer im Viewport. Klappt ja auch wunderbar.

    Das Problem:
    Nutzt ein Smartphone-User ein Input-Feld im Inhaltsbereich, geht ja bei Smartphones automatisch (sinnvollerweise) die Tastatur auf. Dabei sind natürlich bei einem entsprechend programmierten Layout Kopf- und Fußzeile weiterhin am oberen und unteren Rand des sichtbaren Bereich. Das macht bei meinem Sony XPERIA X den Inhaltsbereich im Viewport so klein, dass kaum etwas bedienbar ist.

    Habt ihr schonmal vor dem gleichen Problem gestanden? Und wie habt ihr das gelöst?

    Ich fragte mich schon, ob man das Vorhandensein des Keyboards irgendwie mit JS abfragen kann um dann Extra-Klassen zu vergeben. Eine Abfrage des Resize ist bei einer Responsive Version vielleicht nicht so sinnvoll.

    Ich habe eine Datei im Anhang, damit leichter verständlich ist wo mein Problem liegt.

    VG Martin
     

    Anhänge:

    • tut.jpg
      tut.jpg
      Dateigröße:
      159,3 KB
      Aufrufe:
      1
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Schau Dir mal die nachfolgend verlinkten Beispiele von jQuery Mobile für "Fixed positioning" an.

    Wird in die Seite geklickt (PC) bzw. getippt (Mobile), verlieren Header und Footer ihre fixierte Position im Viewport, indem ihnen diese Klasse zugewiesen wird:
    Code (CSS):
    1. .ui-fixed-hidden {
    2.     position: absolute;
    3. }
    1. Fixed Toolbars
    2. Forms in fixed toolbar demos
    Vielleicht kannst Du damit was anfangen, und die Methodik/Technik in Dein Projekt migrieren, falls Du das jQuery-Framework nicht verwenden solltest.

    [edit]Tipp-Ex[/edit]
     
    Zuletzt bearbeitet: 30. November 2016
  3. Carrear

    Carrear Erfahrenes Mitglied

    Guter Tipp! Ich schaue mir das gleich mal an.
     
Die Seite wird geladen...
Ähnliche Themen - Layout Fester Kopf
  1. Wolfsbein
    Antworten:
    37
    Aufrufe:
    3.423