[GELÖST] Höhe Sidebar und Content-Block anpassen

jojo · 26. Juli 2012 13:45

Hallo CMSMS-User

Gerne möchte ich auf meiner Website die Höhe des Content-Blocks (rot) an die variable(!) Höhe der Sidebar (hellblau) angleichen, sofern der Content-Block - wie in der Abbildung - kürzer ist als die Sidebar. Die weiße Fläche unterhalb des Content-Blocks soll von diesem also vollständig ausgefüllt werden. Da die Hintergrundfarbe des Content-Blocks auf der Website ebenfalls weiß ist und einen Rahmen hat, kann ich die nachfolgende Fläche leider nicht einfach einfärben, um die beiden Blöcke gleichlang erscheinen zu lassen ...

Im Template sind die beiden Bereiche folgendermaßen definiert:
- div class="sidebar1"
- div class="Post"

Im Stylesheet ist die Mindesthöhe (min-height) des Content-Blocks mit 800px angegeben.

Bin bei meiner Recherche u.a. auf "offsetHeight" gestoßen, bin mir aber nicht sicher, ob sich mein Problem damit lösen lässt. Falls ja, wäre ich für Hinweise, wie ich das im Template bzw. Stylesheet einsetzen muss, sehr dankbar.

Hoffe, diese Angaben genügen fürs erste, um mein Problem einigermaßen verständlich darzustellen.
Über Tipps und Lösungsmöglichkeiten würden ich mich sehr freuen!

Vielen Dank schonmal im Voraus,
Jonas

Klenkes · 26. Juli 2012 14:31

Je nach deinen Englischkenntnissen würde ich dir eine Googlesuche mit den Begriffen "faux columns" empfehlen. Es gibt sogar einen Wikipediaeintrag dazu!
Je nach Design könnte dir schon ein background-image mit repeat-y helfen, welchen im Content und Sidebar umschliessenden Bereich nach unten gekachelt wird.

Ansonsten... ist das, glaube ich, das meistgefragte Thema im Bereich HTML/CSS überhaupt. Google hilft.

mike-r · 26. Juli 2012 15:46

Als Alternative zu faux-columns wäre noch:
http://matthewjamestaylor.com/blog/equa … s-no-hacks
oder
http://ago.tanfa.co.uk/css/layouts/flex … index.html
empfehlenswert.

jojo · 26. Juli 2012 16:54

Danke für die Antworten! Wenn ich das Prinzip von "faux columns" richtig verstanden habe, dann wird mit Hilfe eines sich wiederholenden Hintergrundbildes der Anschein erweckt, als würden beide Spalten die gleiche Länge haben, obwohl die tatsächliche Länge der Spalten unverändert geblieben ist. Für mich kommt allerdings die Schwierigkeit hinzu, dass der Content-Block einen Rahmen hat, der die Spalte am Ende abschließen soll. Habe in den letzten Wochen schon mit den verschiedenen Ansätze (u.a. auch faux columns) herumprobiert, doch leider sind bisher alles Bemühungen mehr oder weniger erfolglos geblieben - werde es in den nächsten Tagen mit den Anleitungen der oben geposteten Links noch weiter probieren. Für weitere Tipps bin ich aber natürlich immer sehr dankbar!

Hier noch ein Screenshot meiner Website. Wahrscheinlich kann man es sich dann noch etwas besser vorstellen.

jojo · 27. Juli 2012 08:43

Habe eine Lösung gefunden, die bisher gut zu funktionieren scheint. Dazu habe ich im <head> des Templates folgendes eingefügt:

Hier klicken, um den Code zum Kopieren zu markieren

{literal}
<script language="javascript" type="text/javascript">
function adjust()
{
        sidebar = document.getElementById('sidebar1').offsetHeight;
        document.getElementById('Post').style.minHeight = sidebar + 'px';
}
window.onload=adjust;
window.onresize=adjust;
</script>
{/literal}

Vielleicht hilft das auch anderen weiter, die vor dem selben Problem stehen.

Beitrag geändert von jojo (27. Juli 2012 08:54)

nicmare · 27. Juli 2012 12:18

eine Lösung die ich niemanden empfehlen kann. Aber wenn du damit glücklich bist, ist ja gut wink

Forum für CMS/made simple

#1 26. Juli 2012 13:45

[GELÖST] Höhe Sidebar und Content-Block anpassen

#2 26. Juli 2012 14:31

Re: [GELÖST] Höhe Sidebar und Content-Block anpassen

#3 26. Juli 2012 15:46

Re: [GELÖST] Höhe Sidebar und Content-Block anpassen

#4 26. Juli 2012 16:54

Re: [GELÖST] Höhe Sidebar und Content-Block anpassen

#5 27. Juli 2012 08:43

Re: [GELÖST] Höhe Sidebar und Content-Block anpassen

#6 27. Juli 2012 12:18

Re: [GELÖST] Höhe Sidebar und Content-Block anpassen

Fußzeile des Forums