• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Zwei Divs auf gleiche Höhe bringen VS. Hintergrundfarbe von Spalte soll bis zum Seitenende reichen

P

Praktikant123

Mitglied
Hallo,
ich habe 2 Spalten auf meiner Seite, welche durch eine Trennlinie und durch unterschiedliche Farben getrennt sind. Nun möchte ich gerne haben das beide Spalten sich abhängig voneinander verändern. Konkret soll sich beim Öffnen von Dokumenten rechts, die linke Spalte auch auf die gleiche Länge verlängern.

Am Besten sollte das auch umgekehrt passieren und sich die Trennlinie beim Verändern der Navigation links auch mit verändern.
Immoment hängt diese beim ersten Aufruf nur oben ganz klein in der Luft.

Hoffe ich erschlage hier niemanden mit dem Code.

Hier ist der Code: https://jsfiddle.net/5ngLLuvc/

Gruß.
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    33 KB · Aufrufe: 3
Hallo,
nachdem bemängelt wurde, dass meine Themen zu ungenau beschrieben wären, werde ich nun versuchen, dies nun genauer zu tun.

Also ich habe eine Seite, auf der es 2 Spalten gibt, wobei links in der Spalte Verlinkungen zu PDF's zu finden sind. Beim Klick auf einen Link wird in der rechten Spalte die Datein mit Hilfe von PDFObject.js angezeigt.

Dabei passiert es leider, dass die Hintergrundfarbe (orange) der linken Spalte immer kürzer ist, als die weiße Hintergrundfarbe der rechten Spalte.

Nun habe ich eine Anleitung hier gefunden (http://alistapart.byteshift.de/fauxcolumns/). Leider funktioniert es nicht richtig.

Ich hoffe nun, dass es eine einfache Erklärung hierfür gibt. Falls noch irgendwelche Informationen fehlen, sagt mir bescheid. Bin Anfänger und wäre deshalb froh, wenn mir hiebei jemand helfen könnte.

Dateien: https://jsfiddle.net/95cqnqsp/

Die Hintergrundfarbe (Bild) ist noch enthalten, so wie es in der oben verlinkten Anleitung gefordert wird.
Das nur zur Information. Falls es eine andere Möglichkeit gibt soll das nicht stören.

Gruß
 
Schon vergessen, dass Du die Frage vor sechs Tagen hier gestellt hast? (Führe im Anschluß die beiden Themen zusammen)
Praktikant123 schrieb:
nachdem bemängelt wurde, dass meine Themen zu ungenau beschrieben wären, werde ich nun versuchen, dies nun genauer zu tun.
Zum Vergrößern anklicken....
Ich hatte auch überhaupt kein Verständnisproblem mit der Fragestellung, wie die Höhe zweier Spalten mit unterschiedlichem Inhaltsumfang angeglichen werden kann.

Weniger Ahnung habe ich davon, wozu Du überhaupt Bootstrap in der Seite eingebunden hast, wenn Du das CSS-Konzept komplett mit Deinem eigenen Stylesheet auf die Beine stellst, und Empfehlungen für solch geniale Features des Frameworks ignorierst. Aber vermutlich weißt Du das noch nicht mal selber.
Praktikant123 schrieb:
Nun habe ich eine Anleitung hier gefunden (http://alistapart.byteshift.de/fauxcolumns/). Leider funktioniert es nicht richtig.
Zum Vergrößern anklicken....
Dass diese in die Jahre gekommenen Variante der "Falschen Spalten" bei Dir nicht funktioniert, liegt schlichtweg daran, dass sie ein Seitenlayout mit fester Breite voraussetzt.

Falls Du über http://www.ohne-css.gehts-gar.net/0005.php dort hingelangt sein solltest:
Faux Columns - Gleiche Längen für die Divs schrieb:
Beachte:

Die nachfolgende Anleitung funktioniert nur bei sogenannten "fixen Layouts" wo die Container feste Pixelbreiten oder vergleichbare Festwerte haben. Für "flexible Layouts" mit prozentualen (relativen) Breiten sei auf diese Anleitung verwiesen.
Zum Vergrößern anklicken....
Wenn Du also noch immer die Finger von der Bootstrap-Klasse .row-eq-height lassen willst, wäre Faux Columns bei flüssigem Layout als nächstes Kapitel aufzuschlagen.
 
Also habe mein Bestes versucht aber entweder verschieben sich die Container oder das Dropdownmenü in der linken Spalte funktioniert nicht mehr.
Es ist zum verrückt werden. Die Anleitungen sind eigentlich so einfach, aber ich glaube ich muss eine feste Höhe festlegen.
 
Hallo

Dein Grundproblem ist deine Unstrukturiertheit.

Du verwendest offensichtlich Bootstrap.

Nutzt bei Layoutänderungen aber nicht die Möglichkeiten von Bootstrap, sondern erstellst eigenes CSS, welches du ohne Rücksicht auf die Bootstrap-Vorgaben und ohne selbst genau zu wissen, was du tust, in Bootstrap hineinquetscht.

Anstatt das zu realisieren willst du weitere Änderungen durch noch mehr CSS vornehmen. Feste Höhen vorzugeben ist so ziemlich das Unsinnigste was Webseitenersteller machen können, egal ob mit oder ohne Bootstrap.

Fazit: Du solltest zunächst den HTML-Quelltext im body-Bereich nach den Bootstrap-Vorgaben erstellen oder bereits vorhandenen daraufhin korrigieren.

Danach klemmst du dein individuelles CSS ab und verwendest so weit sinnvoll und möglich Bootstrap-Vorgaben.

Erst dann fügst du Stück für Stück dein individuelles CSS wieder hinzu und achtest dabei darauf nicht mit dem Bootstrap-CSS ins Gehege zu kommen. Dabei kontrollierst du jeden Schritt in den üblichen Browsern.

Gruss

MrMurphy
 
Danke für die Erklärung. Ja die Unstrukturiertheit wird mit wachsendem Code immer größer, das macht alles schwierig.
Ich bin noch nicht so geübt im Umgang mit Bootstrap.

Aber stimmt es, dass ich diese Klassennamen verwenden muss
<div class="col-md-3 equal"> damit das funktionieren kann?
Habe die ganze Zeit die Namen geändert.

Ich werde das beherzigen und dahingehend versuchen alles besser zu machen.


Habe es jetzt gerade nochmal versucht, die Felder bleiben nun konstant an ihrem Platz, jedoch funktioniert das Menü weiterhin nicht.

Gruß.
 
Zuletzt bearbeitet:
Praktikant123 schrieb:
Aber stimmt es, dass ich diese Klassennamen verwenden muss
<div class="col-md-3 equal"> damit das funktionieren kann?
Habe die ganze Zeit die Namen geändert.
Zum Vergrößern anklicken....
Kommt darauf an, für welche der Lösungen Du Dich entschieden hast. Und hast Du auch das Elternelement der Spaltenblöcke berücksichtigt -> <div class="row equalheight">?
Praktikant123 schrieb:
Habe es jetzt gerade nochmal versucht, die Felder bleiben nun konstant an ihrem Platz, jedoch funktioniert das Menü weiterhin nicht.
Zum Vergrößern anklicken....
"Funktioniert nicht" ist keine aussagekräftige Fehlerbeschreibung.

Was genau funktioniert am Menü nicht?
 
Habe die erste Version versucht und die "Mehtode der Zukunft". Aber bin immoment an der 1. dran.
Also <div class="row equalheight"> ist die Klasse, welche über die beiden Spalten geht. ->Habe ich benutzt.

Und zur anderen Frage: Das Menü lässt sich nicht mehr aufklappen und beim drüberfahren ändert sich auch die Hintergrundfarbe nicht mehr. Also eigentlich funktioniert mit der Liste nichts mehr.

So sieht das ganze aus:
<div class="row equalheight">
<div class="col-md-3 equal">
<div id="left">
...
</div></div>

<div class="col-md-9 equal">
<div id="right">
.....
</div></div>/div>

und CSS so:
.equal {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.equalheight {
overflow: hidden;
}

Und habe alle Klammern zigmal überprüft, also das schliesse ich aus.
 
Wenn das mal nicht an der Klasse .equal mit dem ganz speziellen margin-/padding-bottom-Hack liegt. Auch das overflow:hidden von .equalheight könnte sich hier eventuell negativ auswirken.

Für die letzte Gewißheit und zur Gegenkontrolle würde ich einfach diese beiden Klassen aus dem HTML-Code entfernen, um zu sehen, wie sich das Menü danach verhält.

Wenn es sich bewahrheiten sollte, stehen ja noch andere Möglichkeiten zur Auswahl.

Ich persönlich präferiere die Flexbox-Methode, wie ich sie Dir mit meiner Linkempfehlung http://getbootstrap.com.vn/examples/equal-height-columns/ ans Herz legen wollte :)
 
Also gute Nachrichten. Nach sehr langem Probieren hat es nun endlich funktioniert. Zwar nicht mit den Anleitungen von Murphy aber mit der .row-eq-height-Methode.
Ich weiß nicht genau an was es genau lag, aber habe mal das CSS überarbeitet und ein paar sachen verändert.
Muss wohl irgendeine Angabe für eine Breite oder höhe gewesen sein.

Danke Spicelab und MrMurphy!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben