滚动条显示在窗口而不是我的div

Question

当内容太宽时，我无法获得滚动条。相反，我总是在窗口本身上获得滚动条。我已经玩过溢出设置，但我无法做到正确。

jsFiddle

HTML

<table class="wrapper" cellSpacing="0" cellPadding="0"> 
    <tr> 
     <td class="header"> 
      <div> 
       <p class="title">HEADER</p> 
       <p class="subtitle">subheader</p> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="content"> 
      <div class="clearfix"> 
       <div class="col4"> 
        <div> 
         <label class="fieldname">Field 1</label> 
         <span class="fieldcontrol"><input type="text" id="Text1" /></span> 
        </div> 
        <div> 
         <label class="fieldname">Field 2</label> 
         <span class="fieldcontrol"><input type="text" id="Text2" /></span> 
        </div> 
        <div> 
         <label class="fieldname">Field 3</label> 
         <span class="fieldcontrol"><input type="text" id="Text3" /></span> 
        </div> 
        <div> 
         <label class="fieldname">Field 4</label> 
         <span class="fieldcontrol"><input type="text" id="Text4" /></span> 
        </div> 
       </div> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="footer"> 
      <div class="clearfix"> 
       <div class="left"> 
       </div> 
       <div class="right"> 
        <button type="submit">Ok</button> 
        <button>Cancel</button> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 

CSS

.content > div 
{ 
    overflow: auto; 
} 

它使用一个表头，主体和页脚。在身体上，我想要一个div来拉伸表格单元格的全部宽度和高度。当我调整窗口的大小时，我希望页眉和页脚不断调整大小，当内容位于可见区域外时，主体将显示滚动条。

感谢名单！

Answer 1

与div一起工作会不会更容易？ http://jsfiddle.net/tP79v/2/

HTML

<div class="header">Header</div> 
<div class="main"> 
    <div class="toBig"></div> 
</div> 
<div class="footer"></div> 

CSS

.body { 
    overflow:hidden; 
} 

.header { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:30px; 
    background-color:lightblue; 
} 

.main { 
    position: absolute; 
    top:30px; 
    bottom: 20px; 
    width:100%; 
    left: 0; 
    background-color:red; 
    overflow: auto; 
} 

.toBig { 
    position:relative; 
    width: 1000px; 
    height: 200px; 
    background-color:yellow; 
    margin:20px; 
} 

.footer { 
    position: absolute; 
    bottom:0; 
    left:0; 
    height:20px; 
    width:100%; 
    background-color:green; 
}