Responsive nur mit CSS

[NetBull]

Hi,

ein Problem das sich mir immer wieder mal stellt, löse ich jedesmal individuell mit jQuery. Ich bin mir sicher man kann das auch mit CSS ohne jQuery lösen. Gefunden habe ich aber nichts.

Im Anhang findet sich ein Beispiel als JPG. Ich möchte oben und unten je einen DIV mit fester Höhe und 100%iger Breite.

In der Mitte einen DIV der zwei DIV enthält.
Der linke soll eine feste breite und die restliche Höhe haben. Der Rechte soll nun die restliche Breite und restliche Höhe enthalten.

Bei allen DIVS soll der Rahmen, das Padding und Margin ohne Auswirkungen möglich sein. Also egal ob ich einen Rahmen, Padding oder DIV einstelle, das Layout muss sich anpassen. Derzeit löse ich das mit jQuery was ich mir gerne sparen möchte.

LG NetBu||

 

[jeipack]

Hi
Ich denke mal das Hauptproblem liegt in "restliche Höhe"? Meines wissen ist das mit reinem CSS gar nicht so einfach.
Zwei Lösungsansätze: Table-Layout und Flexbox.

Mit Flexbox:
https://jsbin.com/gixerojehu/edit?html,css,output
Alternativ kannst du bei .content height auch calc(100vh - 100px) nehmen.

Browserunterstützung:
http://caniuse.com/#feat=flexbox
http://caniuse.com/#search=calc

 

[NetBull]

Hi,

danke für die Antwort. Das Sieht so aus als würde flexbox auch auf JS zurückgreifen, oder irre ich?

LG NetBu||

 

[jeipack]

Wie kommst du darauf?

Flexbox ist CSS
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
https://css-tricks.com/snippets/css/a-guide-to-flexbox/