Ist es möglich, dass das mittlere div nach rechts füllt, wenn das rechte div leer ist?

Question

Ich versuche, das Layout unserer Website neu zu gestalten, und ich habe diesen großartigen Artikel über den heiligen Gral der div+css Layouts gefunden. Ich war in der Lage, das Layout erfolgreich auf meiner eigenen Website nachzubilden. Ich bin jedoch auf ein Problem gestoßen, das ich jetzt beheben muss.

Ist es möglich, diesen CSS-Code unten zu ändern, um das zentrale div bis zum rechten Rand des Containers auszufüllen, wenn das rechte div keinen Markup enthält? Ich habe einige Seiten, die rechtsseitige Inhalte haben und einige nicht.

Hier ist der Code von http://www.alistapart.com/d/holygrail/example_3.html

    The Holy Grail of Layouts: Example #3: A List Apart

        /*

 Der wesentliche Code

*/

        body {
            min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        }

        #container {
            padding-left: 200px;      /* LC fullwidth */
            padding-right: 190px;     /* RC fullwidth + CC padding */
        }

        #container .column {
            position: relative;
            float: left;
        }

        #center {
            padding: 10px 20px;       /* CC padding */
            width: 100%;
        }

        #left {
            width: 180px;             /* LC width */
            padding: 0 10px;          /* LC padding */
            right: 240px;             /* LC fullwidth + CC padding */
            margin-left: -100%;
        }

        #right {
            width: 130px;             /* RC width */
            padding: 0 10px;          /* RC padding */
            margin-right: -100%;
        }

        #footer {
            clear: both;
        }

        /*

 IE Fix

*/
        * html #left {
            left: 150px;              /* RC fullwidth */
        }

        /*

 Gleichhohe Spalten

*/

        #container {
            overflow: hidden;
        }

        #container .column {
            padding-bottom: 1001em;     /* X + padding-bottom */
            margin-bottom: -1000em;     /* X */
        }

        /*

 Footer Fix

*/

        * html body {
            overflow: hidden;
        }

        * html #footer-wrapper {
            float: left;
            position: relative;
            width: 100%;
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            background: #FFF;         /*

 Gleich wie Hintergrund des Body

*/
        }

        /*

 Nur für das Aussehen

*/

        body {
            margin: 0;
            padding: 0;
            background: #FFF;
        }

        #header, #footer {
            font-size: large;
            text-align: center;
            padding: 0.3em 0;
            background: #999;
        }

        #left {
            background: #66F;
        }

        #center {
            background: #DDD;
        }

        #right {
            background: #F66;
        }

        #container .column {
            padding-top: 1em;
            text-align: justify;
        }

    Dies ist der Kopfzeileninhalt.

            Dies ist der Hauptinhalt.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

            Dies ist die linke Seitenleiste.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

            Dies ist die rechte Seitenleiste.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

        Dies ist der Fußzeileninhalt.

---

Aktualisierung

Ich habe das vorgeschlagene JavaScript ausprobiert und es hat das Layout nicht verbessert. Dies wurde bei .Ready() ausgeführt.

if ($('#right').html() == "") {
    $('#center').width('100%');
    $('#right').width(0);

}

Answer 1

Sie müssen JavaScript verwenden, um dies zu erreichen.

Ihr JavaScript-Onload-Code sollte so aussehen:

1. Überprüfen Sie, ob der richtige div-Inhalt hat

2. Wenn nicht, setzen Sie die Breite des rechten div auf 0 und die Breite des mittleren div auf ihre Startbreite + die Startbreite des rechten div.

   if (document.getElementById("rightDiv").innerHTML == "") { document.getElementById("centerDiv").style.width = '500px'; // ändern Sie 500, je nachdem, wie die Breite des Centers + Rechtsbreite wäre, oder berechnen Sie dies dynamisch, wenn erforderlich

   document.getElementById("rightDiv").style.width = '0px;' // oder setzen Sie es auf display: none, vielleicht

   }