带有视口滚动内容的标题100％宽度

Question

我希望使用可变的中间内容宽度将页眉和页脚扩展为100％。

您可以在http://jsfiddle.net/9dWcZ/

找到来源

HTML：

<div class="header">
this is header
</div>

<div class="content">
  this is content
</div>

<div class="footer">
this is footer
</div>

CSS：

.header, .footer {
    width:100%;
    background:#999;
    height:200px;
    position:relative;
    float:left;
    clear:both;
    display:block;
}
.content {
    width:2500px;
    height:100px;
    background:#9B191B;
    float:left;
}

我不想要固定的标题，也不需要改变结构..

请帮助..

感谢，

Answer 1

您可以按如下方式实现此布局。

您需要添加.wrapper元素，这是必不可少的：

<div class="wrapper">
    <div class="header">this is header</div>
    <div class="content">this is content</div>
    <div class="footer">this is footer</div>
</div>

对于CSS：

.wrapper {
    display: table;
}
.header, .footer {
    width:100%;
    background:#999;
    height:200px;
}
.content {
    width:2500px;
    height:100px;
    background:#9B191B;
}

关键是将display: table应用于.wrapper块。

请参阅演示：http://jsfiddle.net/audetwebdesign/7jxLC/

Answer 2

所以你想从中间点开始扩展它？ 如果那是你想要的，你可以使用： 保证金左：自动; 保证金右：自动; 它将从中心开始增加宽度。