CSS (HTML / JS / Grid) Layout, ein Block maximal groß und festes Seitenverhältnis

-FX-

Cadet 1st Year
Registriert
Dez. 2017
Beiträge
14
Hey,
ich bin im Webdesign nicht zu Hause und seit etlichen Stunden am verzweifeln.
Leider muss ich mein Problem gerade beschreiben ohne Code einstellen zu können.

Ich möchte ein Layout erstellen, dass oben einen Schriftzug und ein paar Funktionsbuttons enthält, dann kommt ein Hauptfeld, dass ein quadratisches Canvas (genaugenommen mehrere übereinander mittels position:absolute und z-index) darstellen soll, darunter kommen ein paar Schieberegler und ganz unten nochmal Funktionsbuttons.

Nun geht es mir darum, dass das Canvas jederzeit maximal groß, jedoch das Ganze ohne Scrollleisten dargestellt wird. Die Seitenränder des Canvas sollen auch gleichzeig die seitlichen Grenzen des Layouts darstellen, soweit dadurch keine Inhalte verloren gehen.

Im ersten Versuch habe ich es innerhalb eines Grid-Layouts probiert, die Zeilen auf Auto, nur die Canvas-Zeile auf 1fr. Im Canvas-Bereich befindet sich ein DIV, welche ich per Prozentangabe auf maximale Höhe gebracht habe, Seitenverhältnis dann per Aspect-Ratio gesetzt. Dann einfach die Canvas-Elemente mit prozentualen Werten in das DIV maximiert.

Zum Einen habe ich da das Problem, dass das Ganze nur mit mit Höhenänderung wie gedacht funktioniert, sobald der Viewport zu schmal wird, wird das Canvas abgeschnitten, da das ganze ja von der zur Verfügung stehenden Höhe abhängt. Dazu kommt noch, dass sich das restliche Grid bei großem Canvas nicht an seine Grenzen anpasst. Ich habe mit dem ganzen Kram keine Erfahrung aber ich nehme mal an das liegt an der absoluten Position.

Seit dem Versuch habe ich vieles ausprobiert, auch per JS, und bin immer wieder irgendwo gescheitert. Aber vielleicht sehe ich ja auch den Wald vor lauter Bäumen nicht mehr. Habt ihr einen Lösungsansatz?

Danke
Chris
 
Ja das mit der absoluten Positionierung wird sicher ein potentielles Problem sein, siehst Du richtig.

Ohne ein Beispiel / Anschauungsmaterial wird man Dir aber nicht zuverlässig helfen können, da musst Du schon was liefern.
Also am besten das Layout mit allem drum und dran auf ein Hoster oder Codepen oder sowas hochladen damit wir uns das ansehen können.
 
paint ;-)
 
Hey,
ich weiß, ich bin jetzt erstmal ein paar Tage unterwegs und müsste den Code erstmal säubern. Werde, wenn hier nicht so der entscheidende Vorschlag kommt, auch nochmal was reinstellen. Vielen Dank erstmal.
 
Du musst uns ein Beispiel geben. Z.B. ein kleines Beispiel in Figma erstellt. Ist kostenlose und das Problem wird dadurch verständlicher. Sollte kein großer Aufwand sein.
 
Hey,
bin jetzt mal dazu gekommen, mein Problem ohne den ganzen Overhead nochmal anzugehen. Diesmal bin ich noch weiter vom Ziel entfernt wie zuvor. Seht selbst:

https://codepen.io/-fx-/pen/wvRMwjG

Es geht grundsätzlich darum, dass die Canvas-Elemente bzw. der #Canvascontainer die maximal verfügbare Höhe bei bleibendem Seitenverhältnis von 1:1 einnehmen sollen. Es dürfen keine Scrollbars entstehen.
Unterschreitet die verfügbare Breite die verfügbare Höhe muss diese dazu in Folge als Bezugsgröße genommen werden.
#mainContainer soll dabei immer die Darstellungsbreite von dem Canvas-Element annehmen

Ursprünglich hatte ich einen 2-spaltigen Grid-Container, an die Stelle wo die die 2 Spalten benötigt habe habe ich nun versucht Flexboxen einzusetzen. Seitdem sind die Probleme sogar noch größer geworden:

  • die Größe ist nur von der verfügbaren Höhe abhängig., nicht aber der Breite. Lässt sich das mit CSS überhaupt lösen?
  • #mainContainer skaliert nicht mit
  • ab einer gewissen unteren Größe skalieren die Canvas-Elemente nicht mehr kleiner
  • irgendwie ist außer für #canvasContainer die Darstellungsbreite innerhalb der Grid-Cells begrenzt. Selbst wenn ich das Grid in #mainContainer mittels width auf eine fixe, große Breite setzte sieht man das zwar am Rahmen, die zur Verfügung stehende Breite für die Inhalte scheint sich jedoch auf ein Minimum zu begrenzen. z.B. wandert der Download-Button eben nicht an die rechte untere Ecke des dargestellten Rahmens

Probleme über Probleme ...
Könnt ihr an dem ein oder anderen Punkt Licht ins dunkle bringen?

Vielen Dank
Chris
 
Zurück
Oben