html - 两列布局，#navigation 在右边，但在 html 中的#content 下面？

Question

我有 2 列布局，出于 SEO 的原因，我希望 #navigation div 位于 HTML 中主要 #content div 的下方。

问题是 - 在某些页面上我想隐藏#navigation，所以#content 必须拉伸(stretch)到 100%，但事实并非如此。。

这是基本代码

页面类型 1:

<div id="wrap">
    <div id="content"></div>
    <div id="navigation"></div>
</div>

页面类型 2:

<div id="wrap">
    <div id="content"></div>
</div>

CSS

#wrap{
   position:relative;
}
#content{
   margin-right:200px;
}
#navigation{
   width:200px;
   position:absolute;
   right:0px;
   top:0px;
}

如果你想玩它:

http://jsfiddle.net/fWrAu/3/

我用 JS 修复它，但没有 JS 的用户会在页面类型 2 上看到右边距。

Answer 1

在正常的页面 html 结构中是这样的:

<div id="wrap">
    <div id="conten">CONTENT</div>
    <div id="navigation">NAVIGATION</div>
</div>

CSS:

#wrap{
    position:relative;
    background-color:red;
    }
    #content{
        margin-right:200px;
        background-color:green;
    }
    #navigation{
        width:200px;
        position:absolute;
        right:0px;
        top:0px;
        background-color:blue; 
    }
    #content, #navigation {
        height:700px;
        font-size:24px;
    }

如果没有导航让我们在 “关于我们页面” html 中说:

<div id="wrap">
    <div id="content" class="aboutUs">CONTENT</div>
</div>

然后添加这个CSS:

.aboutUs {margin-right:0 !important}

demo