Sticky header und Footer

Blickwinkelkanone

Hallo zusammen,

ich hoffe, ihr könnt mir bei meine Problem helfen.

Meine Seite soll so aufgebaut sein.

Oben (über die ganze Breite), soll ein sticky header sein, der aus einer externen Datei besteht. Darunter soll dann der Inhalt kommen. Am Ende des Inhalt soll immer der Footer (auch eine externe Datei) kommen. Der Footer solll, sofern der Inhalt der Seite nicht groß genug ist, auch immer unten am Bildschirmrand auftauchen.

Folgenden Code habe ich. Sobald ich die include PHP nicht habe, funktioniert es einwandfrei. Sobald ich die Dateien einbinde, wird der Inhalt über das Menü gelegt und der Footer ist etwas tiefer, als der Bildschirmrand, so dass man etwas scrollen muss. hier helfe ich mir dann im COntent mit padding-top.

PHP

<style>
html, body {
    height: 100%;
}
#wrapper {
    position: relative;
    min-height: 100%;
    height: auto;
    height: 100%;
}
#content {
    padding-bottom: 75px;
    padding-top: 5%;
}

#header {
    position: fixed;
    width: 100%;
    box-shadow: 1px 1px 11px 1px black;
}

#footer {
    position: absolute;
    width: 100%;
    background-color: #333;
    box-shadow: 1px 1px 11px 1px black;
    bottom: 0px;
}

</style>    
    <!-- Das Menü wird am oberen Bildschirm gelanden. Es hat das Attribut Sticky -->
    <div id="header"><?php include('menue.php'); ?></div>
<div id="wrapper">
  <div id="content">content</div>
  <!-- Der Footer soll automatisch an das Ende von CONTENT gestellt werden -->
   <div id="footer"><?php include('footer.php'); ?></div>
</div>

Alles anzeigen

Wo habe ich den Fehlerß

Vielen Dank

Grüße

Blickwinkelkanone

Sempervivum

Diese Aufgabe tritt häufig auf, ebenso solche Probleme mit der althergebrachten Lösung mit position: fixed;. Statt dessen möchte ich diese Alternative vorstellen:

https://webentwicklung.ulrichbangert.de/flex-scrollable-nav.html

Vorteil: Kein Gefummel mit margin oder padding und das Layout passt sich automatisch an, wenn sich die Höhe der Navigation ändert.

Blickwinkelkanone

Guten Morgen Sempervivum,

danke für die Antwort. Ich habe es mir angeguckt und es sieht wirklich smarter aus.

Wie bekomme ich denn hin, dass der Footer nicht sticky ist. Der soll automatisch immer am Ende einer Seite sein (mindestens aber am unteren Bildschirmrand, wenn content nicht komplett voll ist). In deinem Beispiel ist der Footer immer unten. Das nimmt, gerade auf mobilen Geräten, viel Platz weg.

Danke sehr.

Grüße

Blockwinkelkanone

Sempervivum

Auch kein Problem:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Demo Flexlayout</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            font-family: arial;
        }

        body>*:not(.scroll) {
            flex-shrink: 0;
        }

        .scroll {
            overflow-y: scroll;
            flex: 1;
        }

        header,
        footer {
            font-size: 1.5em;
            align-self: center;
        }

        main {
            text-align: justify;
            display: flex;
            flex-direction: column;
        }

        main>section {
            flex: 1;
        }

        /* Nav */

        nav input {
            display: none;
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-direction: row;
        }

        nav #nav-icon-open,
        nav #nav-icon-close {
            display: none;
        }

        @media screen and (max-width: 600px) {
            header {
                align-self: flex-start;
            }

            nav {
                display: flex;
                align-items: flex-start;
            }

            nav ul {
                display: none;
            }

            nav input:checked~ul {
                display: flex;
                flex-direction: column;
            }

            nav #nav-icon-open {
                display: inline-block;
            }

            nav #nav-icon-close {
                display: none;
            }

            nav input:checked~label #nav-icon-open {
                display: none;
            }

            nav input:checked~label #nav-icon-close {
                display: inline-block;
            }

        }
    </style>
</head>

<body>
    <header>
        <nav>
            <input type="checkbox" id="cbnav">
            <label for="cbnav">
                <i id="nav-icon-open" class="fa fa-bars" aria-hidden="true"></i>
                <i id="nav-icon-close" class="fa fa-times" aria-hidden="true"></i>
            </label>
            <ul>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="page1.html">Page 1</a>
                </li>
                <li>
                    <a href="page1.html">Page 2</a>
                </li>
                <li>
                    <a href="page1.html">Page 3</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="scroll" id="content">
        <section>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
            tempor invidunt ut labore et dolore magna
            tempor 
            ... gekürzt
        </section>
        <footer>This is the footer</footer>
    </main>
</body>

</html>

Alles anzeigen

Bei wenig Content hängt der Footer am unteren Ende. Bei viel Content verschwindet er nach unten und wird erst beim Scrollen sichtbar.

Blickwinkelkanone

Danke sehr für deine schnelle und kompetente Hilfe!

Wieder etwas gelernt.

Wünsche noch einen angenehmen Tag.

Grüße

Blickwinkelkanone

Jetzt mitmachen!