怎么使1个网页分成两个固定的部分来显示
日期：2014-05-18 浏览次数：20956 次
如何使1个网页分成两个固定的部分来显示.
我现在想在1个html页面内分成上下二部分显示, 每个部分是固定的,比例是80%,20%
如果内容太长，显示不完，则每个部分都能有滚动条.
我想过用frame来实现，但好象用frame的话，要用上几个网页文件才能实现，现在我要求只能用1个页面实现. 请问有方法能实现吗?
------解决方案--------------------
以下可以在IE下实现分割功能，没有在firefox下尝试过。
在firefox上可能div的高度不能自动延展，那样的话就将css改成height:auto;但就不能实现按百分比划分了～～
不过如果是用div的话似乎不能实现滚动条的功能吧～～
//index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> split </title>
<link rel= "stylesheet " type= "text/css " href= "style.css " />
</head>
<body>
<div id= "top "> </div>
<div id= "bottom ">
</div>
</body>
</html>
//style.css
* {
margin:0;
padding:0;
}
#top {
background-color:yellow;
width:100%;
height:20%;
}
#bottom {
background-color:green;
width:100%;
height:80%;
}
------解决方案--------------------
记得以前用百分比出不来滚动条的，所以才用脚本去计算像素
看了lujun1985() 的回复，又试一次，竟然可以，看来是我记错了：
<html>
<body>
<div style= "background-color:blue;width:100%;height:20%;overflow-y:auto; ">
<br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1
</div>
<div style= "background-color:green;width:100%;height:80%;overflow-y:auto; ">
<br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1
<br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1
</div>
</body>
</html>
------解决方案--------------------
<html>
<head>
</head>
<body leftmargin= "0 " topmargin= "0 ">
<div id= "Layer1 " style= "position:absolute; left:0px; top:0px; width:100%; height:80%; z-index:1; overflow: auto; ">
</div>
<div id= "Layer2 " style= "position:absolute; left:0; top:80%; width:100%; height:20%; z-index:2 ">
</div>
</body>
</html>
以上代码IE适用
我现在想在1个html页面内分成上下二部分显示, 每个部分是固定的,比例是80%,20%
如果内容太长，显示不完，则每个部分都能有滚动条.
我想过用frame来实现，但好象用frame的话，要用上几个网页文件才能实现，现在我要求只能用1个页面实现. 请问有方法能实现吗?
------解决方案--------------------
以下可以在IE下实现分割功能，没有在firefox下尝试过。
在firefox上可能div的高度不能自动延展，那样的话就将css改成height:auto;但就不能实现按百分比划分了～～
不过如果是用div的话似乎不能实现滚动条的功能吧～～
//index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> split </title>
<link rel= "stylesheet " type= "text/css " href= "style.css " />
</head>
<body>
<div id= "top "> </div>
<div id= "bottom ">
</div>
</body>
</html>
//style.css
* {
margin:0;
padding:0;
}
#top {
background-color:yellow;
width:100%;
height:20%;
}
#bottom {
background-color:green;
width:100%;
height:80%;
}
------解决方案--------------------
记得以前用百分比出不来滚动条的，所以才用脚本去计算像素
看了lujun1985() 的回复，又试一次，竟然可以，看来是我记错了：
<html>
<body>
<div style= "background-color:blue;width:100%;height:20%;overflow-y:auto; ">
<br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1
</div>
<div style= "background-color:green;width:100%;height:80%;overflow-y:auto; ">
<br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1
<br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1
</div>
</body>
</html>
------解决方案--------------------
<html>
<head>
</head>
<body leftmargin= "0 " topmargin= "0 ">
<div id= "Layer1 " style= "position:absolute; left:0px; top:0px; width:100%; height:80%; z-index:1; overflow: auto; ">
</div>
<div id= "Layer2 " style= "position:absolute; left:0; top:80%; width:100%; height:20%; z-index:2 ">
</div>
</body>
</html>
以上代码IE适用
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
