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

参见演示:http://jsfiddle.net/audetwebdesign/7jxLC/