Höhe einer Spalte 100%?

Allgemeine Fragen
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Höhe einer Spalte 100%?

Ungelesener Beitrag von stobi_de »

Ganz blöde Frage:
ich habe in einem Standard-Block von Mobi einen Block mit links Bild und und rechts text. Es gibt eine Row, darin sind 2 Col-6
Das eine col-6 des Bildes ist so hoch wie die Row, das Col-6 mit dem Text ist halb so hoch - so hoch wie der text-Container eben.
Wie bekomme ich nun die Col mit dem Text-container auf 100% Höhe der Row?
Ein unsichtbares Hintergrundbild will ich nun nicht machen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von Tommy Herrmann »

bin gerade am Kochen (bekomme gleich Besuch).

... die Seite wäre Hilfreich.

Hast du mal mit der Bootstrap-Class "vh-100" (vertical height) versucht

https://getbootstrap.com/docs/5.0/utilities/sizing/
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von stobi_de »

Na ja, dann habe ich 100% der Bildschirmhöhe

www.afripix.de/Birgit-Ihne

Viel Spaß mit den Gästen. Morgen ist auch noch ein Tag!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von Tommy Herrmann »

nee - 100% (oder was auch immer Du angibst) der Block-Höhe.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von Tommy Herrmann »

Die Wechselbilder sind so (ähnlich) - habe das auch noch an anderen Stellen:

https://www.mobirise-tutorials.com/Tuto ... ilder.html
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von stobi_de »

irgendwo hat Stober nen Denkfehler....

Code: Alles auswählen

<div class="row align-items-start d-flex" style="background:RED">
                    <div class="col-12 col-md-7 col-lg-6 vh-100 " style="background:green">
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von Tommy Herrmann »

... ich kann heute leider nicht mehr.

Hast Du nicht mal einen Beispielblock "online", damit man überhaupt versteht um was es geht. So theoretisch kann das doch keiner - ich habe nicht die geringste Ahnung wie dieser Block aussehen könnte.

Dann versuche ich mich morgen damit zu beschäftigen. Auf jeden Fall gehört diese Höhenangabe nicht an eine Spalte (col).

Das gehört nicht in die "col" sondern außen herum, also so ähnlich vielleicht:

Code: Alles auswählen

<div class="container h-100">

    Inhalt vom Block-Bereich

</div>
Was ich auch noch so gar nicht verstehe, ist die Aufgabenstellung einen Textbereich auf eine Höhe von 100% des Containers zu bringen!?

stobi_de hat geschrieben: Do 26. Jan 2023, 17:37 Das eine col-6 des Bildes ist so hoch wie die Row, das Col-6 mit dem Text ist halb so hoch - so hoch wie der text-Container eben. Wie bekomme ich nun die Col mit dem Text-container auf 100% Höhe der Row?

Sorry - aber was meinst Du damit eigentlich? Der Text kann doch nur so hoch sein, wie dieser vorhanden ist. Geht es Dir da um irgendeinen Hintergrund oder was? Dann müsste man vielleicht mit einem "padding" arbeiten.

Auf was beziehst Du die 100% Höhe überhaupt - das kann ja wohl nicht der Text sein. Der kann doch nur so hoch sein, wie er als Text diesen Raum des Containers füllt :confused:

Wenn es nur 3 Worte gibt wird es nur eine Zeile Text geben, gibt es 100 Worte wird es mehrere Zeilen Tex geben, gibt es tausend Worte wird der Text da vielleicht 400% der zur Verfügung stehenden Höhe benötigen, also 4 x so viel Platz wie überhaupt vorhanden ist.

Man muss das sehen, sonst kann man nicht helfen.

Hier mal ein Standard-Textfeld aus der Rubrik "Article". Dieses Textfeld hat im Prinzip die Höhe von seinem Text-Inhalt zuzüglich eines "padding" (Innenabstand) oben und unten.

Will ich die Höhe von diesem Block auf 100% meiner Display-Höhe setzen, dann tue ich das mit vh-100 (vertikale Höhe = 100%) oder auch irgendeine andere Höhe (siehe weiter unten mein Beispiel mit der CSS Class).

In einer "row" (Reihe von 12 "columns") wird sich dann natürlich jede der 12 Spalten vom Bootstrap-Grid-System auf die angegebene Höhe stellen.

Siehe auch meine Demo-Seite zum Bootstrap Grid System hier:

https://www.mobirise-tutorials.com/Tuto ... -Grid.html






Text-Feld-Code vh-100 Höhe.jpg



Du kannst das auch als neue Class in die CSS schreiben, also z.B.:

Code: Alles auswählen

.meinheight {
  height: 40vh;
}

Dann ist der Block 40% der Display-Größe hoch:


vertikale Höhe CSS.jpg


Ansicht vertikale Höhe 40vh CSS.jpg



Ob Du so eine Höhe nun einem einfachen Textblock gibst oder einem Block, der in mehrere Bereiche aufgeteilt ist, sollte doch vollkommen egal sein. Dann musst Du eben dem <div> vom Textbereich die Höhe verpassen.

Wenn Du mal beschreiben und zeigen würdest, welchen Block Du da genau am Wickel hast und um was es Dir dabei überhaupt geht, dann könnte ich ja mal versuchen das nachzustellen.

Bei Text sollte man aber aufpassen, weil sich der Inhalt ja ändern kann und sich dann auch die Höhe ändern könnte.

Auf jeden Fall gehört diese Angabe (meiner Meinung) außen herum in die Zeile (row) und nicht an eine Spalte (col).
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von stobi_de »

Moin Tommy,
der SALESPROFI aus dem Mobi-Forum hatte die Lösung.
Der umgebende Container muss d-flex sein. Erst dann funktioniert das h-100.
Wusste ich nicht.

Und natürlich gab es den Block online (jetzt ist er nicht mehr grün), hatte ich oben übersehenerweise doch geschrieben.
https://www.afripix.de/Birgit-Ihne/

Es geht um die Blöcke unter LEBENSBERATUNG.
Der Strich unter dem Text sollte ganz unten mit dem Bildende auf einer Höhe sein. Das war der Grund für die Geschichte!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ah - dann wird das auch klar ...

Ich denke in Mobirise ist es immer besser eigene CSS-Klassen zu verwenden als solche Bootstrap-Klassen, denn Mobirise hat die oft bereits manipuliert.

Muss ich den Link wohl übersehen haben - ich hatte keine Ahnung um was es Dir da wirklich geht.

Tolles Design - echt gut :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von Tommy Herrmann »

Hier habe ich jetzt mal den grünen Block dem linken Block mit dem Bild in der Höhe angepasst.

Einfach noch in die CSS geschrieben:

height: 114.5vh;

Vertical-Height in der Class.jpg


So sieht es ohne diese Anpassung gerade noch in Deiner Original-Seite aus:

Vertical-Height noch nicht angepasst.jpg
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von stobi_de »

Na ja, bei weniger Text wird die Höhe dann wieder anders?
Die Salesprofi-Lösung ist noch nicht online, aber das d-flex und h-100 muss ich inbedingt im Kopf behalten - na wenn das mal klappt!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Höhe einer Spalte 100%?

Ungelesener Beitrag von Tommy Herrmann »

da müsste man erst mal probieren - weiß gar nicht was ich da auf die Höhe gestellt habe. Wenn der Text länger als die Box links (mit dem Bild) wird, dann passt das natürlich nicht mehr.

Ein Flex steht da aber sowieso schon in der Class mit dabei.

Display-Flex.jpg

Ich hätte das ja mal selbst ausprobiert, nur weiß ich immer noch nicht welcher Block aus welchem Thema das ist :(

Wenn, muss man das immer an dem Block um den es geht testen, denn viele Mobirise Blöcke haben Bugs und sind eben sehr oft auch ganz anders konfiguriert als andere ganz ähnliche Blöcke. Es macht also keinen Sinn, einen anderen Block entsprechend zu testen.
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 24 Gäste