HTML/CSS - 拥有部分扩展元素的最佳方式是什么？

Question

假设我有一个 980 像素居中的内容区域，但有一个背景元素从屏幕左侧一直扩展到内容区域的 80%。在没有 JavaScript 干预或在主体上使用背景图像的情况下，如何实现这一点？

编辑:

以下是指导的视觉概念:http://i.imgur.com/36tCm.jpg .黄色标题扩展到窗口左侧，内容框区域之外。

Answer 1

你可以在980px容器之前用一个div元素来获得悬垂效果，并给出定位以匹配header元素所在的位置

jsfiddle example或 fullscreen example

在screenshot你有一个橙色的悬垂在左边，黑色在右边，所以这是 HTML 结构(或者你可以用一个 div 和 css 渐变来做悬垂，创建一个橙色高达 50% 然后黑色其他 50%)

<div class="container-outer">
    <div class="header-overhang header-left"></div>
    <div class="header-overhang header-right"></div>
    <div class="container">
        <div class="sidebar">
            sidebar area
        </div>
        <div class="header">
            PAGE HEADER
        </div>
        <div class="content">
            content text
        </div>
    </div>
</div>​

CSS:

.container-outer {background-color:#BDC7D2;border-top:60px solid #050912;}
.header-overhang {height:72px;width:50%;position:absolute;top:60px;}
.header-left {left:0;background-color:#FDC103;}
.header-right {right:0;background-color:#050912;}
.container {width:980px;margin:0 auto;position:relative;}

.sidebar {float:right;width:20%;height:220px;line-height:220px;text-align:center;border-top:5px solid #d7e0e9;border-bottom:3px solid #d7e0e9;background-color:#fff;}
.header {height:72px;line-height:72px;padding-left:40px;width:80%;background-color:#FDC103;}
.content {padding:50px 40px 120px 120px;background:#050912;color:#fff;}