Frage Wie das DIV bändigen?

[MiB]

Hallo,
nach jahrzehntelanger Abstinenz, hab ich mich wieder an HTML gewagt und CSS dazu genommen. (Gab's damals nicht.) Was ich absolut nicht hinbekomme:
Ich hab ein paar Fotos die durchgescrollt werden sollen. Das DIV (.container) für die Scrollfunktion geht aber über den Seitenrand hinaus. Es endet nicht vor dem nächsten DIV (#footer). Wie bekomme ich das hin? Die Fotos sollen immer vollständig dargestellt werden, ganz egal wie große das Browserfenster ist.
Und bevor es jetzt: "Mach's doch in JS!" hagelt: Das wollte ich nicht auch das noch lernen für dieses kleine Projekt.

Der Code ist hier zu sehen: https://codepen.io/MiB-2/pen/bGbPVyE
Der rote Rahmen um das DIV ist nur zur Veranschaulichung wo es endet. - Gestalterisch ist das natürlich Blödsinn.

 

[basti1012]

Ich schlage erstmal vor das du dein ganzes Layout mit Flexbox machst.
Da du ja lange abzinenz wahrst kannst du das ja nicht wissen.
Flexbox oder auch Grid ist zur Zeit aktuell und auch wunderbar für responsive sachen geeignet.
Dazu machst du dich noch mit @mediaqueries vertraut und dann kann man das alles noch wunderbar auf Handys und andere Endgeräte anpassen.
Deine jetzige Css ist auch etwas überdimensioniert , da könnte man paar Einträge weg lassen.

Wenn du das Layout mit Flexbox hinbekommen hast , bin ich mir sicher das du das mit den Bildern dann auch hinbekommen tust..

Flexbox = http://www.css-wiki.com/listings/flexbox.html
@mediaqueries = https://www.w3.org/TR/css3-mediaqueries/

 

[Sailor]

Ich denke, es liegt bei deinem Problem am 'Boxmodell'
https://wiki.selfhtml.org/wiki/Box-Modell
setze mal ganz am Anfang deines CSS den folgenden Code ein

* {
 box-sizing: border-box;
}

und dann schauen wir weiter.

 

[MiB]

@basti1012: Danke für die Antwort. Flexbox hatte ich gestreift, dann aber ohne gebastelt. - Ich hab mich alles in Allem nur drei Tage eingearbeitet um die Seite zu machen. - Dass das CSS nun ganz und gar nicht optimal ist, wundert mich nicht im Mindesten.
Aber wenn es möglich ist, würde ich gerne einfach nur den Fehler mit dem Bildfluss nach unten beheben. An sich funktioniert die Seite ja. Wenn's natürlich nicht anders geht, muss ich sie nochmal neu machen.
Mediaqueries hab ich bereits drin. Die Seite switched ab 48em.

@Sailor:
Vielen Dank! box-sizing hat schonmal dafür gesorgt, dass der rote Rahmen rechts sichtbar wurde. Unten besteht das Problem weiter.
Macht man den Footer testweise weg, sieht man den unteren Rand immer noch nicht. Bezieht sich height: 100%; von .container eventuell auf das komplette Browserfenster und durch top: 180px; + dem Menü wird es nach unten versetzt?
... Ich hab es gerade ausprobiert: Genau so ist es. Wenn ich height: 50%; setze, ist das DIV immer genau halb so hoch wie das komplette Browserfenster. Die Lösung wäre demnach height: 100% -300px; Blöd nur, dass das nicht geht. Oder geht es doch irgendwie?

 

[Sailor]

Ich hab das zwar jetzt nicht kontrolliert, ob deine Vorkalkulation passt... aber es würde gehen, wenn du ...

height: calc(100% - 300px);

ins CSS einträgst.
Die Leerzeichen in der Klammer müssen bleiben... sonst geht es nicht.

 

[MiB]

@ Sailor: DAS löst das Problem komplett! Vielen Dank!

@Sempervivum: Dein Beitrag muss ich mir erst genau anschauen. (Mach ich jetzt.) Aus dem Text entnehme ich schon mal, dass ich (wie üblich) zu kompliziert gedacht hab.

 

[MiB]

@Sempervivum: Das ist also die felxbox-Methode. - Da muss ich mich erst einlesen. Ich kann das Ganze noch nicht nachvollziehen. Vielen Dank für die Komplett-Überarbeitung. - Die Seite funktioniert allerdings so nicht in Safari. Da gibt es rechts dann einen Scrollbalken und beim Ändern der Fenstergröße wird der Scrollbereich verhundertfach und die Bilder wandern in die Mitte. Da das Ganze viel schlanker zu sein scheint und wohl auch vom Aufbau moderner, muss ich mir diese Flexbox-Geschichte doch noch einverleiben. - Hält sich ja wohl in Grenzen das Ganze. - Am Ende muss ich meine eigene Seite ja auch verstehen.

 

[MiB]

Leider besitze ich keine Apple-Geräte und kann es nicht testen. Oder meinst Du gar Safari unter Windows?

Nein, ich sitze vor nem Mac. - Aber ich hol jetzt das Windows-Laptop und teste noch ie, firefox und chrome. - Opera vielleicht noch.


Edit: Die alte Version mit der Änderung von @Sailor funktioniert auf allen getesteten Browsern. - Auf nem iPhone SE ist das Logo zu klein. Das wird wohl über mediaqueries auch gehen.
Flexbox muss ich mir in den nächsten Tagen anschauen. Bringt es einen großen Vorteil Flexbox einzusetzen, oder kann ich mit dem fahren was bisher funktioniert?

 

[MiB]

Ich will das nur nebenberuflich machen. Es wird wohl bei der Seite bleiben. Die Startseite zeigt dann auch nur eine Handvoll ausgewählter Fotos. Im Portfolio gibt es dann mehr zu sehen. Dann natürlich ohne Scrollfunktion. - Aber ich denke auch da wäre flex von Vorteil.
Responisve ist meine Lösung auch. Hat auf dem Handy gut geklappt.

Die Safari-Version ist 12.0.3

Das flexen werd ich mir voraussichtlich morgen beibringen.