HTML拉伸页眉和页脚长期的内容没有JS

Question

我在这里一个小问题，我做了一个的jsfiddle为你们用它玩：http://jsfiddle.net/darkguy2008/NQUz8/

我的问题是，当有不可避免的长内容，页眉和页脚不会延伸到它，而是最大的浏览器窗口。

我需要找到一种方法让它伸展，我已经有了一个想法，即将页眉和页脚作为内容div的一部分，但如果内容比浏览器窗口更短，它们不会伸展到100％的浏览器窗口宽度，这就是我不想要的。

此外，页面的标题/副标题可以长于内容，这样对大家都没好处：/

我很想改变设计，但它是一个报告的网站，我可以” t把它放在一个边缘：0 auto;因为这个想法并不是以网站为中心或者使报告具有固定的宽度（因为它们不能）。

这个想法也是为了避免JS。我知道我可以使用JQuery修复宽度，但项目也可以被外部客户端使用，所以我们不能强制他们使用JS。奇怪我知道，但我已经看到了愚蠢的系统管理员阻止JS的情况，我们不能做太多的工作，除了让它工作。

我可以使用HTML5和CSS3，因此，如果有一种方法，与这两个技术做这将是巨大的:)

任何想法，欢迎！

HTML：

<header> 
    <div class="wrap"> 
     <table border="0"> 
      <tr> 
       <td rowspan="2"> 
        <img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" /> 
       </td> 
       <td> 
        <h1>title 1 lololol</h1> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <h2>subtitle omgomgomgomgomg</h2> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div id="menu">menu goes here omg</div> 
</header> 
<div>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div> 
<footer> 
    <div class="wrap"> 
     <p>Footer goes here o.o"</p> 
    </div> 
</footer> 

CSS：

/*********************/ 
/** RESET */ 
/*********************/ 
* 
{ 
    padding: 0; 
    margin: 0; 
    /*border: 0;*/ 
    font-family: Arial; 
} 

/*********************/ 
/** Main CSS */ 
/*********************/ 
body 
{ 
    font-family: Arial; 
    font-size: 10pt; 
} 

.wrap 
{ 
    position: relative; 
    margin: 0 0; 
    width: 640px; 
} 

header, footer 
{ 
    background: #0f6; 
    float:left;  
    min-width:100%; 
} 

#menu 
{ 
    min-width: 100%; 
    border-top: 2px solid red; 
    border-bottom: 2px solid red; 
} 

th, td { padding: 0; } 
table { border-collapse:collapse; border-spacing: 0; }