Question

假设我有一个980像素的居中内容区域，但是背景元素从屏幕左侧一直扩展到内容区域的80％。如果没有JavaScript干预或在身体上使用背景图像，您如何实现这一目标？

编辑：

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

Answer 1

您可以通过css处理此问题

#inner{
   background:#fff;
   width:80%;
   position:absolute;
   left:0;
   top:0;
}

你应该为其父母设置这种风格

#parent{
   position:relative;
}

例如：

<div id="parent">
<div id="inner"></div>
</div>

Answer 2

你可以通过一些视觉欺骗来实现这一点 - 即通过使用两个黄色div来创建#pageheader元素的视觉效果。

这是一个JSFiddle illustrating the effect。

以下是一些示例HTML：

<body>
  <div id="yellowBar">
  <div id="content">
    <div id="pageHeader">
  <!--the rest of your HTML...-->

然后，你的CSS：

#yellowBar {
  height: (set appropriate height here);
  background: yellow (set appropriate hex code here); 
  position: absolute;
  top: (set appropriate top value so the #yellowBar nudges up against the #pageHeader visually);
  width: 50%;
  left: 0px;
}

#pageHeader {
  height: (same height as #yellowBar); 
  background: (same color as yellowBar); 
  width: 80%; 
  /*any other CSS rules*/ 
}

Answer 3

你可以在980px容器之前使用div元素获得悬垂效果，并给定位以匹配标题元素所在的位置

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

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

3 个答案: