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/

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

1 个答案: