当内容变得超宽（超出屏幕）时，CSS 自动扩展页眉和页脚 div 宽度以匹配内容 div 宽度

Question

我正在尝试构建一个带有页眉、内容和页脚的网站布局。 页眉和页脚都应扩展为 100% 宽度。他们做到了。但是当我在内容 div 中放置一个非常宽的元素时，页眉和页脚保持在我的屏幕宽度，并且不会进一步扩展以匹配内容宽度。请帮助实现这种行为。

在下面的示例中，我希望蓝色页眉和黄色页脚扩展并匹配灰色内容的宽度（在现实生活中将包含一个宽度未知的表格）

jsfiddle：http://jsfiddle.net/StormBlast/z4hegp1o/3/

HTML：

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div style="width: 2500px; background-color: gray;">
            here comes very wide table with some results and expands beyond screen borders (in width) 
            here comes very wide table with some results and expands beyond screen borders (in width) 
            here comes very wide table with some results and expands beyond screen borders (in width) 
            here comes very wide table with some results and expands beyond screen borders (in width) 
            here comes very wide table with some results and expands beyond screen borders (in width) 
        </div>
    </div>
    <div id="footer">Footer</div>
</div>

CSS：

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

Answer 1

您可能想尝试使用 jQuery 进行这种大小匹配。

使用 jQuery，您只需获取内容 div 的宽度，并在页面加载时更改页眉和页脚宽度。

    $('#header,#footer').width($('#content div').width());

http://jsfiddle.net/z4hegp1o/4/