想用div实现三行，第一行在页面最上面，第三行在页面最下面，中间行自动滚动,该如何处理-HTML教程-爱易网页

想用div实现三行，第一行在页面最上面，第三行在页面最下面，中间行自动滚动,该如何处理

日期：2014-05-17　浏览次数：20670 次

想用div实现三行，第一行在页面最上面，第三行在页面最下面，中间行自动滚动
自己搞不明白了，忘赐教。
问题：
想用div实现三行，第一行（高度一定）在页面最上面，第三行（高度一定）在页面最下面
中间行的高度为这两行的中间的高度，且如果中间行的内容高度过高，自动出现滚动条。

下面这段代码在Mozilla浏览器下可以，但在IE下不行，忘赐教！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
.body{
margin:0px;
}
#top{
width:100%;
height:50px;
position:absolute;
top:0px;
background-color:#ccf;
}
#content{
width:100%;
position:absolute ;
overflow:auto;
top:50px;
bottom:20px;
background-color:#eef;
}
#foot{
width:100%;
position:absolute;
height:20px;
bottom:0px;
background-color:blue;
}
</style>
<BODY class="body">
<div id="top">
top
</div>
<div id ="content">
kfdkf<br>
kfdkf<br>
kfdkf<br>
kfdkf<br>kfdkf<br>kfdkf<br>kfdkf<br>kfdkf<br>
kfdkf<br>
kfdkf<br>kfdkf<br>
kfdkf<br>kfdkf<br>kfdkf<br>
kfdkf<br>
kfdkf<br>
kfdkf<br>
kfdkf<br>
kfdkf<br>kfdkf<br>kfdkf<br>
kfdkf<br>
kfdkf<br>
kfdkf<br>
kfdkf<br>kfdkf<br>
kfdkf<br>
kfdkf<br>kfdkf<br>
kfdkf<br>
kfdkf<br>
kfdkf<br>kfdkf<br>
kfdkf<br>kfdkf<br>kfdkf<br>kfdkf<br>kfdkf<br>kfdkf<br>
</div>
<div id ="foot">foot</div>
</BODY>
</HTML>

------解决方案--------------------

HTML code

 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  <HTML>  
  <HEAD>  
  <TITLE>  New Document   </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">  
  <META NAME="Author" CONTENT="">  
  <META NAME="Keywords" CONTENT="">  
  <META NAME="Description" CONTENT="">  
  </HEAD>  
  <style>  
 .body{  
 margin:0px;  
 }  
 #top{  
 width:100%;  
 height:50px;  
 /*position:absolute;*/  
 top:0px;  
 background-color:#ccf;  
 }  
 #content{  
 width:100%;  
 /*position:absolute ; */ 
 overflow-y:auto;  
 /*top:50px;  
   bottom:20px; */ 
 background-color:#eef;  
 height:500px; 
 }  
 #foot{  
 width:100%;  
 /*position:absolute; */ 
 height:20px;  
 bottom:0px;  
 background-color:blue;  
 }  
  </style>  
  <BODY class="body">  
  <div id="top">  
 top  
  </div>  
  <div id ="content">  
 kfdkf  <br>  
 kfdkf  <br>  
 kfdkf  <br>  
 kfdkf  <br> kfdkf  <br> kfdkf  <br> kfdkf  <br> kfdkf  <br>  
 kfdkf  <br>  
 kfdkf  <br> kfdkf  <br>  
 kfdkf  <br> kfdkf  <br> kfdkf  <br>  
 kfdkf  <br>  
 kfdkf  <br>  
 kfdkf  <br>  
 kfdkf  <br>  
 kfdkf  <br> kfdkf  <br> kfdkf  <br>  
 kfdkf

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

想用div实现三行，第一行在页面最上面，第三行在页面最下面，中间行自动滚动,该如何处理

相关资料更多>

推荐阅读更多>