主要的思想是将外层div<div id="wrap">的padding-bottom设为<div id="header">及<div id="footer">的高度之和，再将<div id='content">的高度设为100%;示例代码如下：可以随意修改<div id="wrap">的高度
<style type="text/css" media="screen">
*{
margin:0px;
padding:0px;
}
#header, #footer {background: #eee;height: 50px;}
#content {background: #ffc;height:100%;margin:0px 0px 0px 0px;padding:0px;overflow-y:scroll;text-overflow-y:scroll;}
#wrapper {border: 1px solid #000; width: 600px; margin: 0 auto; padding-bottom: 100px; position: relative;height:300px;overflow:hidden;}
#footer {position: absolute; bottom: 0; left: 0; width: 600px; height: 50px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header content</div>
<div id="content">
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if anyall content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if anyall content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
<table style="hegith:600px:"><tr><td>ss<br /></td></tr><tr><td>ss<br /></td></tr><tr><td
*{
margin:0px;
padding:0px;
}
#header, #footer {background: #eee;height: 50px;}
#content {background: #ffc;height:100%;margin:0px 0px 0px 0px;padding:0px;overflow-y:scroll;text-overflow-y:scroll;}
#wrapper {border: 1px solid #000; width: 600px; margin: 0 auto; padding-bottom: 100px; position: relative;height:300px;overflow:hidden;}
#footer {position: absolute; bottom: 0; left: 0; width: 600px; height: 50px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header content</div>
<div id="content">
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if anyall content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if anyall content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
all content in h<br />e<br />r<br />e<br /> - <br />i<br />n<br />c<br />luding <br />columns/sidebars if any
<table style="hegith:600px:"><tr><td>ss<br /></td></tr><tr><td>ss<br /></td></tr><tr><td