[ERLEDIGT] Tabellenhöhe an Breite anpassen?

[kristalljunge]

Hallo,

ich hab ganz kurz eine Frage, und zwar:

Ich habe eine externe .php Datei, auf zwei verschiedenen Seiten zeigen möchte. Auf der einen Seite soll sie 400x400px haben, auf der anderen soll die Tabelle 250x250px haben. Mit "height= 100%;" komme ich mit der Breite soweit gut hin, als dass sich dass dann auf beiden Seiten gut verhält, aber wie mache ich das mit der Höhe?

Ich hoffe ihr versteht was ich meine und steinigt mich nicht. Ich habe versucht es zu ergoogeln, aber komme nicht weiter :)

 

[SpiceLab]

Mit "height= 100%;" komme ich mit der Breite soweit gut hin

Nicht eher mit width="100%"?

aber wie mache ich das mit der Höhe?

Anstelle von % mit den CSS3 Viewport Units vw & vh arbeiten.

Selbstverständlich lässt sich vw auch in der Vertikalen, und vh in der Horizontalen anwenden, was Deinem Ziel entgegenkommt, (immer) quadratische Kantenlängen zu definieren/bilden

• Fiddle-Demo: https://jsfiddle.net/SpiceLab/csuex5wj/

Und frei Haus noch etwas Nachtlektüre oben d'rauf :)

• https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css
  
• http://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/
• https://www.drweb.de/magazin/neue-css-einheiten-fuer-responsive-designs-47490/
• ...

Moderation: Thema von HTML nach CSS verschoben

 

[kristalljunge]

Perfekt, 1000 Dank.
Ich hau mich da durch! Danke <3

 

[SpiceLab]

Ich hau mich da durch!

Guter Plan - nur blos nicht dabei verletzen

 

[scbawik]

Anstelle von % mit den CSS3 Viewport Units vw & vh arbeiten.

Mag zwar in manchen Fällen funktionieren, allerdings sind vw/vh Einheiten in der Praxis doch recht unflexibel, da sie sich im Gegensatz zu % nicht am Parent-Element orientieren.

Hier eine Lösung die allen Situationen gerecht werden sollte: https://jsfiddle.net/70g7ge3u/

Verwendung:

.table-wrapper {
  width:250px; // bzw. jede andere gewünschte Einheit. %, vw,...
}

PS: Bitte nicht als Kritik verstehen :)

 

[SpiceLab]

Mag zwar in manchen Fällen funktionieren, allerdings sind vw/vh Einheiten in der Praxis doch recht unflexibel, da sie sich im Gegensatz zu % nicht am Parent-Element orientieren.

"Unflexibel" wird's, wenn die HTML-Struktur so verschachtelt ist, wie in Deinem Fiddle, und 33 Zeilen CSS (gegenüber meinen 5) benötigt werden, um es umgesetzt zu bekommen

Aber gut, dass wir darüber gesprochen haben

 

[scbawik]

"Unflexibel" wird's, wenn die HTML-Struktur so verschachtelt ist, wie in Deinem Fiddle, und 33 Zeilen CSS (gegenüber meinen 5) benötigt werden, um es umgesetzt zu bekommen

Aber gut, dass wir darüber gesprochen haben

Na dann stell das ganze mal in einem Responsive Container mit max-width dar.
Mit meiner Lösung kein Problem, mit deiner unmöglich ;)

https://jsfiddle.net/70g7ge3u/1/

Das extra Markup ist vlt nicht schön, aber funktionell.

 

[SpiceLab]

Na dann stell das ganze mal in einem Responsive Container mit max-width dar.
Mit meiner Lösung kein Problem, mit deiner unmöglich ;)

https://jsfiddle.net/70g7ge3u/1/

Das extra Markup ist vlt nicht schön, aber funktionell.

Alles Aspekte, mit denen Du richtig liegen magst, aber ob sie hier überhaupt auch zutreffen, erforderlich sind, steht auf einem anderen Blatt

Warten wir's ab