创建一个带有两个 100% 页面宽度的实心条的 960px 样式？

Question

我正在尝试为我正在开发的项目网站创建一个 WordPress 样式。我是一名体验设计师，但有一个概念我想不通。我希望能够将网站的宽度设置为 960px，但顶部有两个栏。你可以在下图中明白我的意思。

https://i.sstatic.net/pSShB.png

我真的希望能够使用蓝色条作为菜单系统，并将所有内容保持在主 960px 整体宽度内。徽标图像需要从内容开头（960px 开始的地方）开始。该图像只是一个模型，但这就是我希望我的用户能够看到它的方式。我希望整个网站能够缩放，以便在任何尺寸的显示器上看起来都一样。

我一整天都在试图想出一个有效的解决方案，但什么也没想到。

有人对我有想法吗？在所有浏览器中都可以使用的东西？

Answer 1

您必须创建一个相对容器，并在绝对容器内部，如下所示：

<div id="header_struct">
 <div id="green_area">{logo goes here float it right or something}</div>
 <div id="blue_area">{menu structure goes here, float left or something}</div>
</div>

您的风格：

#header_struct{
 position: relative;
 width: 960px;
}
#green_area{
 position: absolute;
 right: 700px; // makes it start 260px in from the left side
 width: 1000px; // makes it go off the left side of the screen for instance
 background-color: green;
}
#blue_area {
 position: absolute;
 left: 260px; // makes it start 260px in from the left side
 width: 1000px; // makes it go off the left side of the screen for instance
 background-color: blue;
}

基本上，您需要在相对容器 #header_struct 内嵌套绝对定位 div。我没有测试过这个，但我记得做过类似的事情。我希望这能让你开始。

这是一个清理过的 JSFIDDLE 的工作原理：
http://jsfiddle.net/37Fmh/

Answer 2

像这样的事情应该可以帮助你开始。

http://jsfiddle.net/pxfunc/DxW47/1/

css:

body {background:#eee url('http://files.me.com/pwb3/lo1t09') repeat 0 0;margin:0;padding:0;}

#greenBg {background:#00cb00;height:50px;width:50%;top:40px;right:50%;position:absolute;}
#blueBg {background:#00b8de;height:50px;width:50%;top:40px;left:50%;position:absolute;}

.clear {clear:both;}

#container {width:960px;margin:40px auto 0 auto;position:relative;}
#header {background-color:#00cb00;width:220px;float:left;padding:15px;}
#nav {background-color:#00b8de;width:678px;border-left:solid 2px #fff;float:left;padding:15px;}

#content {margin-top:10px;border:solid 1px #ddd;background-color:#fff;padding:15px;height:400px;}

html:

<div id="greenBg"></div>
<div id="blueBg"></div>

<div id="container">
    <div id="header">
        <span>site logo</span>
    </div>
    <div id="nav">nav</div>
    <br class="clear" />
    <div id="content">content</div>
</div>