✔ Footer Darstellungsfehler beim Handy Samsung S20 +

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;
}
 
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.
 
Auch hier ist Flex dein Freund: justify-content und align-items beides auf center setzen, dann ist es zentriert, sowohl vertikal als auch horizontal.
 
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>
 
@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
 
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
 
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:
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück