Question

我有2列布局，出于搜索引擎优化的原因，我希望#navigation div位于HTML中的主要#content div下面。

问题是 - 在某些页面上我想要隐藏#navigation，所以#content必须延伸到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上看到正确的边距。
基本上我尝试找到另一个 HTML / CSS解决方案。因为我的工作无效任何帮助，将不胜感激。 THX！

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

希望这个帮助

Answer 2

您可以将内容宽度设置为100％并将z-index设置为导航上方吗？

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

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

2 个答案: