Müssen CSS-sidebar Höhe zu erweitern, mit Inhalt

Ich habe ein layout mit zwei Spalten, die mit einem grauen Kasten auf der rechten Seite. Ich brauche die sidebar Höhe zu erweitern, wenn die Höhe der linken Spalte erhöht ist (wegen des Inhalts wird dynamisch erweitert). Ich kann die sidebar passen eine statische Seite, aber ich kann es nicht in der Größe erhöhen, mit dem rest der Seite. Habe einige Googeln, aber konnte Sie nicht finden, ein work-around, die für mich gearbeitet.

Weiß jemand, wie dies zu tun?

InformationsquelleAutor Justin | 2009-10-23

  1. 10

    Dies ist ein häufiges problem bei der Verwendung von DIVS für diese Art von layout.

    Wenn Sie google "- Faux column " sollten Sie erhalten einige Antworten.

    zB. http://www.alistapart.com/articles/fauxcolumns/

    InformationsquelleAutor Dal

  2. 10

    Diese vielleicht etwas off, aber wenn Sie jQuery verwenden auf Ihrer Website können Sie eine schnelle Berechnung und die Größe aller DIVs teilen eine ähnliche Klasse, die maximale Höhe:

    $('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
    -1 für die Beantwortung mit jQuery, verwenden Sie echte JavaScript statt.
    +1 für jQuery anstelle von "echten" JavaScript

    InformationsquelleAutor Corey Ballou

  3. 5

    Wurde ich verfolgt von diesem problem, und ich schrieb einen Artikel zu diesem Thema: Fertig mit faux columns. Hier ist, was ich argumentiert:

    JavaScript-basierte Lösung für das
    problem ist nicht schlimmer als jede andere
    Lösung. In der Tat, wenn Sie verwenden
    JavaScript können Sie ein paar Stunden
    von frustration zu versuchen, die Dinge
    arbeiten. Die Leute warnen
    dies mit den Worten “Was wird passieren, wenn
    der Benutzer JavaScript ausgeschaltet?“.
    Glauben Sie mir, wenn der Benutzer es deaktiviert hat
    JavaScript, die meisten der Website ist gebrochen
    für ihn sowieso. Ihre Seitenleiste nicht
    ihm nicht egal.

    Als cballou erwähnt, ist der einfachste Weg, dies zu tun ist die Verwendung von JQuery-code:

    $(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
    jQuery IST real, JavaScript, John. Dein Kommentar impliziert, sollten wir stehen auf den Schultern der Zwerge, keine Riesen.

    InformationsquelleAutor Niyaz

  4. 2

    Änderte ich die background-color die gleiche Farbe wie meiner sidebar, auf jener Seite, obwohl ich Sie Hintergründe für all meine Abschnitte eher als einen Allgemeinen hintergrund. Aber das funktioniert möglicherweise nicht für alle.

    In meinem stylesheet,

    .sidec
{
background-color:#123456;
}

    In meine HTML-Seite,

    <body class="sidec">

content....

</body>

    InformationsquelleAutor mikey

  5. 1

    Vor kurzem sah ich eine sehr kreative Lösung für dieses problem mithilfe der CSS-Eigenschaften position:absolute und border.

    Definitiv Wert heraus überprüfen, um zu sehen, ob es für Sie arbeitet.

    Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

    InformationsquelleAutor Eric Lennartsson

  6. 1

    Ich bin mir nicht sicher, ob dies wird helfen, da bin ich ein Neuling. Jedoch, wenn Sie kämpfen mit immer meine sidebar zu zeigen, wird der ganze Inhalt, wenn ich verdoppelt seine Größe habe ich Folgendes. Ich war die änderung meiner Höhe und Breite, auf die keine Reaktion, bis ich wechselte die Klasse. Meine Klasse aufgelistet SB-Rahmen SB Breite. Also, wenn ich änderte meine Klasse zu Lesen, SB-Höhe SB Breite-es passt mein Inhalt statt der original-Bildgröße. Ich habe auch versucht SB max sb Breite mit gearbeitet, aber es nahm meine Fußzeile Menü-Leiste (das heißt, Sie würde es nicht mehr). Ich ging zurück nach SB-Höhe SB Breite, und alles ist gut. Das ist super-duper-Grundschule für alle von Euch bin ich sicher, aber nur, falls es einen anderen Neuling die dies Lesen, nicht verstehen, viel über html-code wie mich... ich hoffe, das hilft =)
    Happy Holidays Jeder!
    Umarmungen, tara

    Das ist die erste Umarmung, die ich erhalten habe auf StackOverflow!

    InformationsquelleAutor tara

  7. 0

    Ich vermute, Sie wollen die Anwendung bestimmter Auswirkungen auf Ihr layout, so dass er beide Spalten, um die Größe zusammen. Wenn Sie möchten, um dynamisch ändern Sie die Werte der Höhe der Säulen, bezweifle ich, es wird funktionieren einfach nur mit css, es sei denn, Sie implementieren, einige javascript zur Steuerung der Stil.

    Dal schlug, schauen Sie bei dem link auf " faux columns. Wie der name schon sagt, die Lösung ist nicht viel über das ändern von Spalten Höhe. Stattdessen gibt es die "illusion", dass beide Spalten angezeigt werden von der gleichen Höhe, wenn Sie in Wirklichkeit nicht sind -- und wird mit der Verwendung von Fliesen im hintergrund.

    Die Idee ist, es gibt keine Notwendigkeit zu erschweren, die mark-up. Einfache Struktur mit einem Hauch von "illusion" mit Bildern ist eine gängige Praxis im web design.

    Grüße,
    Jona

    InformationsquelleAutor oonoo

  8. 0

    Mit den Armen Haltung gegenüber neuen Mitgliedern hier erwarte ich mir barracked für diese Antwort, hier geht.
    Ich habe, um dieses problem, indem Sie ein Hintergrundbild 960px Breite 1px hoch mit den zwei Farben, die ich brauchte, für die Spalten, die in Ihrer jeweiligen Breite (780px und 180px). Dann habe ich diese als Hintergrundbild für meinen container, wiederholt sich auf der y-Achse und die aus der content und die Rechte sidebar background-color: transparent.

     .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

    Ich bin sicher, dass diese Methode hat Ihre Einschränkungen, aber es funktioniert perfekt auf allen meinen Seiten.

    Ist es möglich, dass ich nicht dies sehr gut erklärt, wenn dem so ist, nett über Sie wird Sie bitte. Ich endevour zu erweitern auf meine Methode(die ist wahrscheinlich schon allgemein bekannt).

    InformationsquelleAutor Colin Taylor

Schreibe einen Kommentar