css - 全角页眉和页脚由三个图像组成，其中一个是可变宽度的

Question

我试图让一个由三个子元素组成的页眉和页脚工作。页眉和页脚纯粹是装饰性的，不用于导航，应该跨越页面的整个宽度。对于页眉和页脚，我分别使用了三个图像，每侧一个固定宽度的唯一图像和一个应该填充它们之间的空间的 1px 图像。

标头的 HTML 非常基本：

<div id="header-container">
    <div id="header-left">
    </div>
    <div id="header-mid">
    </div>
    <div id="header-right">
    </div>
</div>

我已经非常接近绝对定位，但是标题是固定的并且将始终保持在顶部，这绝对是意想不到的行为（#header-mid 在这里是不必要的）：

div#header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: url(images/header-spacer.png) repeat-x;
}

div#header-left {
    position: absolute;
    width: 600px;
    height: 70px;
    top: 0;
    left: 0;
    background: url(images/header-left.png);
}

div#header-mid {
    display: none;
}

div#header-right {
    position: absolute;
    width: 600px;
    height: 70px;
    top: 0;
    right: 0;
    background: url(images/header-right.png);
}

带有图像的 JSFiddle 示例（确保您的结果窗口宽于 1200 像素）

使用相对定位我无法显示背景图像，并且使用 HTML 显示图像无法与 header-mid 一起使用。

我在网上找到了大量关于全角页眉/页脚的指南，但没有一个明确讨论过这种组合。

 

感谢Soheil Gh回答页眉问题，但该方法不适用于页脚。这是一个额外的 JSFiddle，包括页脚。

Answer 1

尝试这个

div#header-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85px;
background: url(images/header-spacer.png) repeat-x;
}

div#header-left {

width: 640px;
height: 85px;
float:left;
background: url(images/header-left.png);
}

div#header-mid {
float:left;
/*insert background image*/
}

div#header-right {

width: 640px;
height: 85px;
 float:right;
background: url(images/header-right.png);
}