Frage "Main" und "Footer" überlappen sich, wenn der Viewport zu klein wird

[annsen]

Hallo,

die Überschrift sagt es schon. Ich habe mir eine Testseite "gebaut" und nun eine Frage, auf die ich keine Antwort finde.

Die Seite ist sehr einfach strukturiert:

- header
- nav
- main
- footer (sticky footer)

Wenn ich jetzt den Viewport durch Änderung des Browserfensters verkleinere, verhalten sich alle Bestandteile wie gewünscht ABER der (Text)inhalt von "main" schiebt sich in den footer. Der Scrollbalken, am rechten Rand, wird erst sichtbar, wenn der main-Text durch den footer bis nach ganz unten zum Browserfensterrand "gewandert" ist.
Als wenn der footer gar nicht "gesehen" wird.

Gewünscht ist folgendes Verhalten: so wie alle anderen Bestandteile auch, soll der main-Text sich nicht in den nächsten Bereich schieben - "main" soll eine Mindesthöhe haben, die sich am enthaltenen Inhalt orientiert. (min-height für "main" hab ich versucht - das hat aber nicht funktioniert)

Kann mir jemand einen Tipp geben?

Vielen Dank!!

 

[MrMurphy]

Hallo

Kann mir jemand einen Tipp geben?

Verzichte auf position: absolute, auf position: fixed und float.

Gruss

MrMurphy

 

[annsen]

Der Footer war "absolute" positioniert...

Hab ich rausgenommen - jetzt hängt der Footer UNTERM "main" (und kommt sich mit diesem nicht mehr in die Quere - das passt also! Danke!! ) aber nun ist der Footer nicht mehr am unteren Bildschirmrand... kann ich beides haben?

 

[MrMurphy]

Hallo

kann ich beides haben?

Klar. Ich ging davon aus du

Kann mir jemand einen Tipp geben?

wolltest nur einen Anstoß haben um dann selbst eine Lösung zu finden.

Da deine Informationen recht mager sind kann ich dir nur zeigen wie ich vorgehen würde.

Zunächst würde ich zwei Container erstellen:

   <div class="scrollen">
   </div>
   <footer class="pagefooter">
   </footer>

In div.scrollen kommt aller Inhalt, der gescrollt werden soll. Zum Beispiel header, nav, main, aside. In den footer die Angaben, die immer am unteren Fensterrand sichtbar sein sollen.

Das grundsätzliche CSS sieht dann so aus:

      body {
         height: 100vh;
         padding: 0rem;
         margin: 0rem;
         display: flex;
         flex-direction: column;
      }
      body>*:not(.scrollen) {
         flex-shrink: 0;
      }
      .scrollen {
         overflow-y: scroll;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }

Dazu dann noch die üblichen CSS-Angaben für Abstände, Farben, ...

Eine Beispielseite könnte dann so aussehen:

http://boratb.bplaced.net/index39.html

Ein Vorteil gegenüber den meisten anderen Lösungen ist, dass sich die Höhe der footer dem Inhalt anpasst und keinen anderen Inhalt überdeckt. Das kannst du nachvollziehen indem du das Fenster schmaler ziehst.

Gruss

MrMurphy

 

[annsen]

Kann mir jemand einen Hinweis geben, warum ich manche Beiträge auf "erledigt" stellen kann und manche (wie diesen) nicht? Ich habe nur die Möglichkeit "Thema nicht weiter beobachten" anzuklicken...

 

[threadi]

Wenn ich mich recht entsinne handelt es sich um eine zeitliche Beschränkung.