Question

我正在尝试重建我们网站的布局，我在div + css布局的圣杯上找到了这个很棒的article。我能够在我自己的网站上成功重新创建布局。我遇到了一个问题，这就是我现在需要帮助解决的问题。

当正确的div不包含标记时，是否可以修改下面的这个css以使中心div一直填充到容器的右边缘？我有一些页面有正确的内容，有些则没有。

以下是http://www.alistapart.com/d/holygrail/example_3.html

的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>The Holy Grail of Layouts: Example #3: A List Apart</title>
    <style type="text/css">

        /*

 The Essential 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 */
        }

        /*

 Equal-height Columns 

*/

        #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;         /*

 Same as body background 

*/
        }

        /*

 Just for Looks 

*/

        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;
        }

    </style>
</head>

<body>

    <div id="header">This is the header.</div>

    <div id="container">

        <div id="center" class="column">
            <h1>This is the main content.</h1>
            <p>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.</p>
            <p>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.</p>
        </div>

        <div id="left" class="column">
            <h2>This is the left sidebar.</h2>
            <p>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.</p>
        </div>

        <div id="right" class="column">
            <h2>This is the right sidebar.</h2>
            <p>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.</p>
        </div>

    </div>

    <div id="footer-wrapper">
        <div id="footer">This is the footer.</div>
    </div>

</body>

</html>

更新

我尝试了建议的javascript，并没有改善布局。这是在.Ready（）。

上执行的

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

}

Answer 1

您需要使用JavaScript来完成此任务。

您的JavaScript onload代码应如下所示：

检查右侧div是否包含任何内容
如果没有，请将右侧div的宽度设置为0，将中间div的宽度设置为以+右侧div的起始宽度开始。

if（document.getElementById（“rightDiv”）。innerHTML ==“”） { document.getElementById（“centerDiv”）。style.width ='500px'; //将500改为中心宽度+右边宽度，或者你可以在必要时动态计算
```
document.getElementById("rightDiv").style.width = '0px;' // or set it to display: none, perhaps
```
}

当右div为空时，是否可以将中心div填充到右侧？

更新

1 个答案: