Footer Darstellungsfehler beim Handy Samsung S20 +

Sempervivum

Erfahrenes Mitglied
Du hast fast alles richtig gemacht, es fehlt nur eine Kleinigkeit:
Du musst auch dem äußeren main ein display: flex; geben, sonst läuft das flex: 1; beim inneren div#main ins Leere und es dehnt sich in vertikaler Richtung nicht aus:
Code:
main {
    flex: 1;
    overflow-y: auto;
    text-align: justify;
    display: flex;
    flex-direction: column;
}
 

Thomas_Jung

Erfahrenes Mitglied
Hi Sempervivum, du hast recht jetzt klappt das,
1 Frage hätte ich noch.
Was muss ich ändern, dass der Inhalt vom Scrollbarerm Bereich #main zentriert in der Mitte angezeigt wird.
(horizontal und vertikal)
Und nicht links oben.
 

Sempervivum

Erfahrenes Mitglied
Auch hier ist Flex dein Freund: justify-content und align-items beides auf center setzen, dann ist es zentriert, sowohl vertikal als auch horizontal.
 

Thomas_Jung

Erfahrenes Mitglied
Irgendwie klappt das nicht so ganz?

HTML:
<style>
    #main {
        flex: 1;
        overflow: auto;
        text-align: justify;
        justify-content:center;
        align-items:center;   
        width:100%;   
    }

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

Thomas_Jung

Erfahrenes Mitglied
@hallo, warum bleibt der Footer beim scrollen nicht unten kleben?

Funktioniert nur im Firefox (Handy) nicht.

Nur zur Information.

Wenn "Zum Ausblenden der Symbolleiste scrollen " in den Einstellungen ausgeschaltet, ist das Problem nicht mehr vorhanden.
Schönen Feiertag euch allen.

Screenshot_20221001-140928_Firefox.jpg
 

Thomas_Jung

Erfahrenes Mitglied
Hallo nochmal,
ich habe festgestellt, dass, wenn ich bei der
zweiten_seite.php im #main das "align-items:center; "
hinzufüge
werden mir nur die Hälfte der Daten angezeigt.
Kann ich "align-items:center; " also einfach weglassen?

bild1.jpg


Sollte eigentlich so aussehen

bild2.jpg



Hier nochmal sie zwei Seiten

INDEX.PHP


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: auto;
    text-align: justify;
    display: flex;
    flex-direction: column;
    width: 100%;
    }

    header,
    footer {
        flex: 0 0 auto;
        font-size: 2em;
        align-self: center;
        background-color: #2f5a6c;
        width:100%;
        overflow:auto;
    }
</style>
</head>
<body>
    <header><div style="min-width:2000px;">header 1</div></header>
    <main></main>
    <footer><div style="min-width:2000px;">footer 1</div></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

Code:
<style>
#main {
    flex: 1;
    display:flex;
    overflow: auto;
    text-align: justify;
    justify-content:center;
    align-items:center;
    width:100%;   
}

#header,
#footer {
    flex: 0 0 auto;
    font-size: 2em;
    align-self: center;
    background-color: #F5F4F2;
    width:100%;
    overflow:auto;
}
</style>
<div id="header" style="min-width:2000px;">header 2</div>
<div id="main">
START
<?php
$i = 1;
while ($i <= 1000)
{
    echo $i;
    echo "<br>Scrollbarer Bereich<br>";
    $i++  ;
}
?>
ENDE
</div>
<div id="footer" style="min-width:2000px;">footer 2</div>

Gruß Thomas
 

Sempervivum

Erfahrenes Mitglied
Du hast da mehrere CSS-Anweisungen, die sich auf die Ausrichtung der Elemente auswirken. Wenn ich auf das Standardverfahren für horizontale Zentrierung umstelle, funktioniert alles:
Code:
#main {
    flex: 1;
    display: flex;
    overflow: auto;
    /* text-align: justify; */
    /* justify-content: center; */
    align-items: center;
    /* Überflüssig, da der Default für das align-items im übergeordneten
    Container "stretch" ist */
    /* width: 100%; */
    flex-direction: column;
}

Edit: Ich habe da etwas übersehen: Du hast ja "text-align" auf "justify" stehen, dann ist align-items: center; nicht richtig. Du kannst sowohl align-items: center; als auch display: flex; weg lassen, da Du nur Text in dem Container #main hast. D. h. dieses ist ausreichend und funktioniert in meinen Testdateien:
Code:
main {
    flex: 1;
    /* display: flex; */
    overflow: auto;
    text-align: justify;
    /* justify-content: center; */
    /* align-items: center; */
    /* width: 100%; */
}
 
Zuletzt bearbeitet:

Thomas_Jung

Erfahrenes Mitglied
Hi,
da ich nicht nur Text in den Container #main übergebe, muss ich das
justify-content:center; stehen lassen. Sonst rutscht der Inhalt #main nach links.
Funktioniert auch.

ABER :(
Wenn ich es stehen lasse, schneidet er mir in der Mobilen Ansicht mit Edge, Firefox usw.
wieder die Hälfte von links ab.