kleines CSS Problem

[Gundel]

hallo zusammen
Ich bin am Aufbau einer Site und habe folgendes Problem, dem ich grad nicht mächtig werde:
Der Container mit den Inhalten hat einen weissen Hintergrund und links und rechts ist es grau.
Wenn ich das Fenster verkleinere, ist der weisse Teil nicht mehr so hoch wie das gesamte Browserfenster sondern plötzlich weniger hoch.
Was ist da falsch?
Grüsse und tausend Dank!
Gundel
URL: anna.schönzha.ch (ohne www mit ö ...)

[Thoni]

Füge das mal hinzu:

#wrapper {overflow: auto;}

Bitte noch in allen Browsern testen.

[ciaobello]

Ich musste mit dem FF nachgucken um zu sehen was Du meinst. Im Chrome ist das nicht so extrem.

Vielleicht solltest Du Sagen mit Welchem Slider Du arbeitest und wenn es nicht den Core-Slider ist das Problem zum entsprechenden Erweiterungs Thema verschieben lassen.

So wie ich im Quelltext gesehen habe handelt es sich um den Flex-Slider?!

Der Slider passt sich nicht der Breite an (ist nicht responsive) und Zerreißt Dein Layout. Wie gesagt, der chrome schneidet einfach rechts (erscheint scrollbalken) ab und Überlappt den Haupt Bereich über den Linken Bereich.

[Gundel]

Füge das mal hinzu:

#wrapper {overflow: auto;}

Bitte noch in allen Browsern testen.

das geht nicht, dann erscheint ein Scrollbalken am Rande des wrappers, also am Rand des weissen Bereiches.

Zum Slider:

Es ist ein Liquidslider (wenn man auf die Thumbnails klickt) und in jedem Slider wos mehrere Bilder hat ist es ein flexslider und wenn man auf fullscreen klickt eine fancybox.
Vielleicht erscheint das viel zu kompliziert, aber ich wusste nicht, wie ich diese Anforderungen anders lösen sollte.
Der Slider ist nicht responsive, die Site auch noch nicht. Das wollt ich noch ändern und für mobil ev. ein anderes Layout erstellen. (ich weiss, ¨mobile first...)
Mein Problem ist in der Höhe nicht in der Breite. Ich meinte, dass der weisse Bereich nicht immer die ganze Browserhöhe hat, spricht genau dann, wenn das Fenster einen Scrollbalken hat.
Auch wenn ich alle Inhalte ausschalte (ausser der Navigation) besteht das Problem. Darum dachte ich, dass es nichts mit dem Slider zu tun hat.

Gruss
Gundel

[derRenner]

Hallo,

weiss nicht, ob das die Lösung ist, aber probier mal dem #container die height:100% zu entfernen und dem #thumbnail eine fixe Höhe von 200px (oder ähnlich) zu geben ...

[Spooky]

Das Problem liegt daran, dass du deinem #container und deinem #wrapper eine Höhe von 100% gibst. Das bedeutet, dass der #wrapper nie höher wird als der Viewport und somit auch der #container. Bei Inhalten die über die Größe des Viewports hinausgehen, bleibt natürlich die Höhe des #container und #wrapper auf der Höhe des Viewports.

Dein Ziel ist wahrscheinlich, dass du deinen weißen Bereich immer bis nach unten gehen lassen willst, auch wenn der Content nicht mindestens so hoch ist wie der Viewport. Dies solltest du in deinem Fall eher so bewerkstelligen:

html, body {
    height:100%;
}

#wrapper {
    min-height:100%;
    background:#fff;
}

#container {
    /* keine fixe Höhe definieren */
} 

[Gundel]

Hallo Rener, hallo Spooky
Eure beiden Lösungsvorschläge zusmmen haben mein Problem behoben.
Mir ist zwar nicht ganz klar wieso, aber es funktioniert.
Und ich bin euch sehr dankbar!
Gundel