带有视口滚动内容的标题 100% 宽度答案

【问题标题】：Header 100% width with viewport scrolling content带有视口滚动内容的标题 100% 宽度
【发布时间】：2013-10-01 00:08:13
【问题描述】：

我想用可变的中间内容宽度将页眉和页脚扩展到 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;
}

我不想要固定的标题并且不改变结构..

请帮忙..

谢谢，

【问题讨论】：

不清楚您要做什么。你能解释一下.content 应该如何显示吗？
您已将内容宽度指定为 2500 像素。这是固定的，还是可以动态的？

标签： css dom layout

【解决方案1】：

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

【讨论】：

不，实际上我想扩展标题 bg 以扩展中间内容的宽度.. 即中间红色 bg 的宽度更大，所以它正在滚动......并且页眉和页脚不滚动。 . 正如你在 jsfiddle 中看到的那样 link jsfiddle.net/9dWcZ

【解决方案2】：

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

您需要添加一个.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/

【讨论】：