当内容超宽时(超出屏幕)，CSS自动扩展页眉和页脚div宽度以匹配内容div宽度 [英] CSS auto expand header and footer div width to match content div width, when content goes extra wide (beyond screen)

问题描述

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

I am trying to build a web site layout with header, content and footer. Both header and footer should expand to 100% width. And they do. But when I put a very wide element inside content div, header and footer stay at width of my screen and do not expand further to match content width. Please help to achieve such behaviour.

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

In my example below, I would like blue header and yellow footer to expand and match width of gray content (which in real life will contain a table with unknown width)

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

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;
}

推荐答案

您可能想尝试使用jQuery进行这种尺寸匹配.

You might want to try using jQuery for this kind of size-matching.

使用jQuery，您只需抓住内容div的宽度，并仅在加载页面时更改页眉和页脚的宽度.

With jQuery you simply grab the width of the content div, and change both the header and footer widths just when the page is loaded.

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

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

这篇关于当内容超宽时(超出屏幕)，CSS自动扩展页眉和页脚div宽度以匹配内容div宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！