css - 带有视口滚动内容的标题 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

所以你想从中间点开始扩展它？如果这就是你想要的，你可以使用：margin-left:auto; 边距右：自动；然后它会从中心开始变宽。