✔ Footer Darstellungsfehler beim Handy Samsung S20 +

Thomas_Jung

Thomas_Jung

Erfahrenes Mitglied
Hallo, warum bleibt der Footer beim scollen nicht unten kleben?

Funktioniert nur im Firefox (Handy) nicht.

Beim Chrome und Edge ist alles OK.

Gruß Thomas Jung


Screenshot_20201122-121743_Firefox.jpg
HTML: 
<!DOCTYPE html>
<html lang="de" />
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Thomas Jung</title>
<style>
*,html,body { outline-style: none;  }
*, *:before, *:after
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body
{
    width: 100%;
    height: 100%;   
    margin: 0;
    padding: 0;

}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000000;
    font-weight: normal;
}
.header {
    width: 100%;
    height:50px;
    top: 0;
    position: fixed;
    background-color: #012169;
    z-index: 10;
    color: white;
    text-shadow: none;
}
.content {
    width: 100%;
    top: 50px;   
    bottom: 50px;
    position: fixed;
    background-color: red;
    z-index: 10;
    color: white;
    text-shadow: none;
    overflow:auto;
}
.footer {
    width: 100%;
    height:50px;   
    bottom: 0;
    position: fixed;
    background-color: #012169;
    z-index: 10;
    color: white;
    text-shadow: none;
}
</style>
</head>
<body>
<div class="header">Kopf</div>
<div class="content">START
Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />
Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />
Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />v
Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />v
Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />Mitte<br />
Mitte<br />
ENDE</div>
<div class="footer">Fuss</div>
</body>
</html>



Gruß Thomas Jung
 
Da hast Du ja ausgiebig position: fixed; verwendet :D Es geht auch vollkommen ohne, versuche, ob dann dein Problem immer noch auftritt.

Code: 
<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Fixierter Header und Footer mit Flexlayout</title>

    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            font-family: arial;
        }

        main {
            flex: 1;
            overflow-y: auto;
            text-align: justify;
        }

        header,
        footer {
            flex: 0 0 auto;
            font-size: 2em;
            align-self: center;
        }
    </style>
</head>

<body>
    <header>This is the header</header>
    <main>
        <p>Für die Aufgabe, Header und Footer zu fixieren, so dass sie beim Scrollen immer sichtbar sind,
            gibt es einmal die althergebrachte Methode: Beide werden mit positon:fixed fixiert. Dies funktioniert
            selbstverständlich,
            hat aber den Nachteil, dass dann Header und Footer zunächst den Hauptinhalt überdecken. Gelöst wird das i.
            allg.
            indem man dem betr. Container Margins gibt. Funktioniert auch, hat aber den Nachteil, dass dies nur mit
            einer festen Größe
            möglich ist (jedenfalls wenn man kein Javascript verwendet.
        </p>
        <p>
            Mit dieser Demoseite stelle ich eine Alternative vor, die diesen Nachteil vermeidet. Gescrollt wird hier
            nicht
            das ganze Browserfenster sondern nur der main-Container. Durch die Verwendung von Flexlayout passt sich die
            Höhe
            dieses Containers an den zwischen Header und Footer verbleibenden freien Raum an ohne dass man irgend welche
            festen
            Abmessungen definieren muss.
        </p>
    </main>
    <footer>This is the footer</footer>
</body>

</html>
 
Hi Sempervivum,
vielen Dank für deine Antwort.
Das Problen ist immer noch da.
Es tritt nur dann auf wenn ich bei Hochscrollen den Footer mit berühre.
(Nur beim Firefox mit dem Handy Samsung S20 +)
Meine Frau hat die gleiche Version von Firefox auf Ihrem Handy (Samsung S7) ist das Problem nicht vorhanden. Bei meinem Sohn auch nicht. (Samsung S9).
Scheinbar liegt das Problem am Handy (Samsung S 20+).
An der App kann es doch nicht liegen oder? (Es ist die selbe Version 83.1.0 Build #2015776403)

Gruß Thomas Jung
 
Guten Morgen,
vielen Dank basti1012 für deinen Hinweis.
Habe Firefox mehrfach Deinstalliert und Neu Installiert. Problem war immer noch da.
Heute Morgen Handy aus Sicherung vom Juni 2020 wiederhergestellt Problem weg? :) :) :)

Vielen Dank auch nochmal an Sempervivum (es geht auch vollkommen ohne) habe ich umgesetzt (y)(y)(y)

Gruß Thomas Jung
 
Hallo,
leider zu früh gefreut.
Das Problem tritt auf wenn ich beim Firefox in die Einstellungen > Anpassen die Symbolleiste auf Oben setzte. :mad:
Wenn ich Sie auf Unten lasse ist das Problem nicht da :confused:

Muss ich das Verstehen ???

Screenshot_20201123-084708_Firefox.jpg
 
Mit dieser Beschreibung kann ich das Problem reproduzieren. Der Footer springt auch, wenn ich auf dem Header wische. Stehe ebenfalls ratlos davor und vermute beinahe, dass es ein Fehler im Firefox ist.
 
Ja, sehe ich auch so. Der FF für Desktop ist ja vollkommen anders, Umschaltung der Symbolleiste auf oben oder unten gibt es nicht und er wird ja mit der Maus bedient. Ich habe es sicherheitshalber trotzdem getestet und kann kein Springen des Footer feststellen.
 
Hallo, ich hänge mich mal hier an, wenn es erlaubt ist.
Ich möchte folgendes erreichen, (siehe Foto 1)

index.php

PHP: 
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fixierter Header und Footer mit Flexlayout</title>
<style>
    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        font-family: arial;
    }

    main {
        flex: 1;
        overflow-y: auto;
        text-align: justify;
    }

    header,
    footer {
        flex: 0 0 auto;
        font-size: 2em;
        align-self: center;
        background-color: #2f5a6c;
    }
</style>
</head>

<body>
    <header>header 1</header>
    <main></main>
    <footer>footer 1</footer>
    <form id="submitForm" name="submitForm" action="index.php" enctype="multipart/form-data" method="post">
        <input type="hidden" id="aktion" name="aktion" value="">
    </form>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("header").click(function () {
                var formData = $('form')[0];
                var formData = new FormData();
                formData.append("Name", "Thomas");
              
                $.ajax({
                    url: "zweite_seite.php",
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (response) {
                        $('main').html(response);
                    }
                });
                
            });
        });
    </script>   
</body>
</html>

zweite_seite.php

PHP: 
<style>
    #main {
        flex: 1;
        overflow-y: auto;
        text-align: justify;
    }

    #header,
    #footer {
        flex: 0 0 auto;
        font-size: 2em;
        align-self: center;
        background-color: #F5F4F2;
    }
</style>
<div id="header">header 2</div>
<div id="main">Scrollbarer Bereich</div>
<div id="footer">footer 2</div>

Das Ergebnis sollte so aussehen

beispiel.jpg

und nicht so

beispiel_no.jpg


Könnte mir jemand helfen das zu verwirklichen?

Gruß Thomas
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück