html - 元素背景从最左边到整个页面的某个点

Question

我看到了以下布局:

哪里:

• A = 标题，宽度:100%
• B = 页面内容，最大宽度:960px； margin :0 自动
• C = 页脚，宽度:100%

我遇到的问题是 H1。该设计具有 H1 的背景，从屏幕的最左侧进入，一直延伸到与下方内容的右侧对齐。如果浏览器窗口小于 960 像素，那么显然它只是显示为横跨整个屏幕的实心条。

我真的不知道如何开始这个。我考虑过某种负左边距 + 左填充，但不知道固定大小，很难依靠百分比来准确排列元素。

我认为最接近的解决方案是拥有一个以 H1 为中心的巨大背景图像，或者可能位于 H1 周围的容器上。不理想，因为它只是一种纯色，所以使用图像违背了我的道德判断。

有什么想法吗？ Here's the structure of the page :

<header>
    <h1>This is my title</h1>
</header>
<article></article>
<footer></footer>

CSS

header,
footer {
    width: 100%;
    min-height: 100px;
    background: #eee;
    overflow: hidden;
}

article {
    margin: 0 auto;
    max-width: 500px;
    height: 100px;
    background: #ddd;
}

h1 {
    margin: 30px auto;
    width: 500px;
    background: #bbb;
}

Answer 1

您可以通过多种方式尝试执行此操作。

jQuery 解决方案会提供最准确的结果，但是对于这类问题来说它有点繁重，而且我个人不喜欢使用 Javascript 来解决 CSS 问题。

你可以用背景图片做一些技巧，你可能不得不根据你的实际设计，但就单一背景颜色而言，我可能会用一个位于标题后面的元素来解决这个问题负边距顶部，以及 50% 的设置宽度(这样它应该始终隐藏在标题后面)。您需要做的就是匹配它的 height 和 margin-top 以将其与标题混合。

.header-botch {
  background: #bbb;
  height:37px;
  width:50%;
  margin-top:-67px;
}

http://jsfiddle.net/duFnR/1/

如果出于某种原因你讨厌使用负边距的想法，你可以 position: absolute 元素来代替

http://jsfiddle.net/duFnR/2/