Layout bildschirmfüllend bei verschiedenen Bildschirmgrößen, wie macht man das?

[Schuster]

Liebe Comunity

mein Problem ist folgendes: ich habe eine Website mit einer Gesamtbreite von 1900 und 2 Seitenspalten von jeweils 400 px realisiert, den wrapper auf 100 % gesetzt, und so ein bildschirmfüllendes Layout erreciht, was auf meinem Laptow (Auflösung 1900) auch sehr gut aussieht, aber bei schmalen Bildschirmbreiten zB. 1024 px bleiben für die Hauptspalte nur mehr 224 px, was für den Inhalt natürlcih Probleme ergibt. Reduziere ich die Breite der Seitenspalten deutlich, tritt hingegen das Problem bei großen Bildschirmbreiten auf, da die Spalten dann an den Rändern kleben. Ich möchte nicht eine fixe Gesamtbreite, sondern unbedingt bildschirmfüllendes Layout auf allen verschiedenen Desktopgr0ßen. Das Beste wäre anpassungsfähige Seitenspalten, aber geht das überhaupt?? Angaben in prozent gehen ja nicht bei den Seitenspalten, wegen Holy Grail.
Oder kann man das Problem über den Viewport Metatag lösen? Ich glaube, der viewport metatag wird nur von Mobilgeräten gelesen. Liege ich da richtig? Oder funktionierts auch für verschiedene Desktopgrößen?

Oder über Media Queries? Aber damit kann man doch nur spezielle Stylessheets für die verschiedenen Bildschirmbreiten einbinden, aber doch nicht die Seitenspalten regulieren, oder???

Ich wäre sehr dankbar für einen leicht verständlichen und etwas ausführlichen Rat vom Profi, denn als Anfänger bin ich auf Hilfe angewiesen.

[tab]

Natürlich kannst du die Spaltenbreiten per CSS per media queries der Bildschirmbreite anpassen. Was zu tun ist, um z.B. die beiden Seitenspalten auf 300px zu setzen:

#container {
  padding-left: 300px;
  padding-right: 300px;
}

#left {
  width:300px;
  right:300px;
}

#right: {
  width: 300px;
}

Ich hoffe, ich habe nichts vergessen .

[Schuster]

Hallo, ich möchte mich ganz herzlich bedanken für die nette Hilfe und dazu noch mit genauer Angabe von CSS. Hatte in den letzten Tagen ein Computerproblem, deshalb antworte ich erst heute. Hat perfekt geklappt, nach wenigen Minuten hatte ich mit Ihrer Anweisung gelöst, wo ich mir zuerst schon lange den Kopf zerbrochen hatte. Vielen Dank nochmals!

[z33]

Ich bin mir nicht ganz sicher ob ich deine Frage richtig verstanden habe, aber du könntest alternativ auch relative Viewport units benutzen, wie z.B. 100vw.
Dann ist dein Element immer genau so groß wie der Viewport des Ausgabegerätes.

[Schuster]

Hm, das mit den media queries hat mein Problem gelöst, aber trotzdem wäre ich neugierig auf diesen Lösungsansatz. Leider weiß ich nicht, was mit viewport Units gemeint ist. Das Meta -Viewport -Tag wird wohl etwas anderes sein, das bestimmt ja das Zoom Verhalten auf mobilen Geräten, bzw. wenn es nicht gesetzt ist, werden die Inhalte einfach herabgezoomt, bis sie ins kleine Bildschirmfenster von mobilen Geräten passen. Mit viewport units wird wahrscheinlich etwas anderes gemeint sein. Leider habe ich beim googlen nur englische Seiten gefunden, deshalb ist es mir nicht klar, worum es sich genau handelt. Wenn mir da ein bißchen auf die Sprünge geholfen werden könnte, wäre ich dankbar.

[Knigge]

Wenn es im CSS um eine variable Darstellung von Elementen geht sind prozentuale Werte das A und O.

Unter anderem: "%", "em", "rem", "vw", "vh".

Ich arbeite in 90% nur noch mit Prozent. Das hat den Vorteil, dass auch wenn es nicht benötigt ist, ich so ein Layout habe, dass einfach abgewandelt werden kann. Außerdem wollen viele durch die Google-Umstellung nun responsiv und so habe ich da schon eine Vorarbeit.

[z33]

Hm, das mit den media queries hat mein Problem gelöst, aber trotzdem wäre ich neugierig auf diesen Lösungsansatz. Leider weiß ich nicht, was mit viewport Units gemeint ist. Das Meta -Viewport -Tag wird wohl etwas anderes sein, das bestimmt ja das Zoom Verhalten auf mobilen Geräten, bzw. wenn es nicht gesetzt ist, werden die Inhalte einfach herabgezoomt, bis sie ins kleine Bildschirmfenster von mobilen Geräten passen. Mit viewport units wird wahrscheinlich etwas anderes gemeint sein. Leider habe ich beim googlen nur englische Seiten gefunden, deshalb ist es mir nicht klar, worum es sich genau handelt. Wenn mir da ein bißchen auf die Sprünge geholfen werden könnte, wäre ich dankbar.

Sorry für die späte Antwort.
Im Prinzip ist es ganz simpel. Anstatt feste Höhen/Breiten Angaben zu vergeben, können relative Angaben mit Viewport-Units gesetzt werden. Diese beziehen sich dann immer auf den Viewport des Ausgabegerätes.

Ein Beispiel: height:50vh, würde bewirken dass das Element immer 50% von der aktuellen Höhe des Viewports haben würde (vh = view height). Das Ganze gibts aber nicht nur für die höhe, sondern auch für die Breite, Ich hoffe ich konnte dir etwas helfen. Mehr Infos findest du hier: https://web-design-weekly.com/2014/1...-vh-vmin-vmax/