找了很久都没有找到，css 三行一列，满屏中间行自适应高度，上下固定高度。
时间：2010-06-20
来源：互联网
哪里有请给个例子，谢谢，中间行超出高度要显示滚动条。
作者: no1234 发布时间: 2010-06-20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{list-style:none;margin:0;padding:0;}
html,body{width:100%; height:100%;overflow:hidden;}
.main{width:100%;height:100%;overflow:hidden;clear:both;}
.top{height:10%;width:100%;background:#fcc;}
.center{height:80%;width:100%;overflow-y:scroll;}
.bottom{height:10%;width:100%;clear:both;background:#fc0;}
</style>
</head>
<body>
<div class="main">
<div class="top"></div>
<div class="center">
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
要的是这样的效果吗？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{list-style:none;margin:0;padding:0;}
html,body{width:100%; height:100%;overflow:hidden;}
.main{width:100%;height:100%;overflow:hidden;clear:both;}
.top{height:10%;width:100%;background:#fcc;}
.center{height:80%;width:100%;overflow-y:scroll;}
.bottom{height:10%;width:100%;clear:both;background:#fc0;}
</style>
</head>
<body>
<div class="main">
<div class="top"></div>
<div class="center">
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
<p>反倒看风景的浪费空间的思考了附近的思考</p>
<p> </p>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
要的是这样的效果吗？
作者: xuexianli 发布时间: 2010-06-21
貌似不错哦，在IE6下也可以
作者: jhtiboy 发布时间: 2010-06-21
如果上面DIV加边框和底部DIV加边框就会显示不完全了
作者: weiq270 发布时间: 2010-06-25
把上面的代码拿下来了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{list-style:none;margin:0;padding:0;} html,body{width:100%; height:100%;overflow:hidden;} .main{width:100%;height:100%;overflow:hidden;clear:both;} .top{height:10%;width:100%;background:#fcc;} .center{height:80%;width:100%;overflow-y:scroll;} .bottom{height:10%;width:100%;clear:both;background:#fc0;} </style> </head> <body> <div class="main"> <div class="top"></div> <div class="center"> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> <p>反倒看风景的浪费空间的思考了附近的思考</p> <p> </p> </div> <div class="bottom"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
[ 本帖最后由 xfcmamb 于 2010-7-1 16:48 编辑 ] 提示：您可以先修改部分代码再运行
作者: xfcmamb 发布时间: 2010-07-01
为什么我仿照楼上的写了一个，为什么在firefox下面完全没有效果?但是楼上的却是好的。
-----------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
*{list-style:none;margin:0;padding:0;}
html,body{width:100%; height:100%;overflow:hidden;}
.master_wrapper{width:100%;height:100%;overflow:hidden;clear:both;}
.master_top{height:10%;width:100%;}
.master_top_left{float:left;height:100%;width:70%;}
.master_top_right{float:right;height:100%;width:30%;}
.master_center{height:80%;width:100%;}
.master_center_left{height:100%;width:20%;overflow-y:scroll;float:left}
.master_center_right{height:100%;width:80%;overflow-y:scroll;float:right}
.master_bottom{height:10%;width:100%;clear:both;}
</style>
</head>
<body>
<div class="master_wrapper">
<div class="master_top">
<div class="master_top_left">
</div>
<div class="master_top_right">
</div>
</div>
<div class="master_center">
<div class="master_center_left">
这个是左边的内容
</div>
<div class="master_center_right">
这个是右边的内容
</div>
</div>
<div class="master_bottom">
</div>
</div>
</form>
</body>
</html>
[ 本帖最后由 damngoto 于 2010-7-1 17:42 编辑 ]
-----------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
*{list-style:none;margin:0;padding:0;}
html,body{width:100%; height:100%;overflow:hidden;}
.master_wrapper{width:100%;height:100%;overflow:hidden;clear:both;}
.master_top{height:10%;width:100%;}
.master_top_left{float:left;height:100%;width:70%;}
.master_top_right{float:right;height:100%;width:30%;}
.master_center{height:80%;width:100%;}
.master_center_left{height:100%;width:20%;overflow-y:scroll;float:left}
.master_center_right{height:100%;width:80%;overflow-y:scroll;float:right}
.master_bottom{height:10%;width:100%;clear:both;}
</style>
</head>
<body>
<div class="master_wrapper">
<div class="master_top">
<div class="master_top_left">
</div>
<div class="master_top_right">
</div>
</div>
<div class="master_center">
<div class="master_center_left">
这个是左边的内容
</div>
<div class="master_center_right">
这个是右边的内容
</div>
</div>
<div class="master_bottom">
</div>
</div>
</form>
</body>
</html>
[ 本帖最后由 damngoto 于 2010-7-1 17:42 编辑 ]
作者: damngoto 发布时间: 2010-07-01
晕倒，我用网络时空在线编辑器又是好的。。。
作者: damngoto 发布时间: 2010-07-01
经过检查是这句话导致的，不加这句话能正常显示，加了就没有高度了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
作者: damngoto 发布时间: 2010-07-02
最近正想做一个这样效果的，来学习一下
作者: jszsj 发布时间: 2010-11-04
遇到这种情况，果断用frame
<frameset rows="71,*" framespacing="0" border="0"> <frame src="top.html" id="header-frame" name="header-frame" frameborder="no" scrolling="no"> <frameset cols="178, 18, *" framespacing="0" border="0" id="frame-body"> <frame src="left.html" id="menu-frame" name="menu-frame" frameborder="no" scrolling="auto"> <frame src="drag.html" id="drag-frame" name="drag-frame" frameborder="no" scrolling="no"> <frame src="t1.html" id="main-frame" name="main-frame" frameborder="no" scrolling="yes"> </frameset> </frameset> <noframes></noframes>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: wpf5400 发布时间: 2010-11-04
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
