1个网页分成两个固定的部分来显示
2007-04-20 10:05
369 查看
1.
<html>
<style>body{margin:0;}</style>
<body>
<div style="background-color:blue;width:100%;height:20%;overflow-y:auto;">
<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/><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/><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/>
</div>
</body>
</html>
2.
<html>
<head>
<style>body{margin:0;}</style>
<script>
function fixedDiv(){
var d1 = document.getElementById("div1");
var d2 = document.getElementById("div2");
var h = window.document.body.clientHeight;
d1.style.height=h*0.2;
d2.style.height=h*0.8;
}
window.onload=function(){
fixedDiv();
}
window.onresize=function(){
fixedDiv();
}
</script>
</head>
<body>
<div id="div1" style="background-color:blue;width:100%;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 id="div2" style="background-color:green;width:100%;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>
3.
<!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%;
overflow:auto;
}
#bottom {
background-color:green;
width:100%;
height:80%;
overflow:auto;
}
<html>
<style>body{margin:0;}</style>
<body>
<div style="background-color:blue;width:100%;height:20%;overflow-y:auto;">
<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/><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/><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/>
</div>
</body>
</html>
2.
<html>
<head>
<style>body{margin:0;}</style>
<script>
function fixedDiv(){
var d1 = document.getElementById("div1");
var d2 = document.getElementById("div2");
var h = window.document.body.clientHeight;
d1.style.height=h*0.2;
d2.style.height=h*0.8;
}
window.onload=function(){
fixedDiv();
}
window.onresize=function(){
fixedDiv();
}
</script>
</head>
<body>
<div id="div1" style="background-color:blue;width:100%;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 id="div2" style="background-color:green;width:100%;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>
3.
<!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%;
overflow:auto;
}
#bottom {
background-color:green;
width:100%;
height:80%;
overflow:auto;
}
相关文章推荐
- 移动端网页大小固定区域滚动/overflow:auto移动端不显示滚动条
- 截取固定长度字符串显示在页面,多余部分显示为省略号(区分汉字和字符)
- 网页上显示日期型(smalldatetime)SQL数据,只显示日期部分:
- TabActivity 显示两个 网页 Tab
- 怎么让表格为固定大小,超出的部分显示为省略号
- Android webview加载网页只想显示部分内容
- 固定控件大小时,为了图片显示不变形,使用Glide显示图片中间部分
- ASP.net:截取固定长度字符串显示在页面,多余部分显示为省略号
- png图片半透明部分在网页中显示为白色的处理
- 编写将一个包含有20个数据的数组M分成两个数组,正整数数组P和负数数组N ,分别把这两个数组中的数据的个数显示出来
- 网页中有两个table, 默认只显示第一个table,点击一个按钮后显示第二个table,第一个table隐藏
- 网页部分内容显示不全
- jQuery网页右侧固定层显示隐藏在线qq客服代码
- excel表格设置之冻结窗口(效果:让整个表格分成几部分,可以让下面的内容滚动显示)
- Ext的panel中部分固定显示,部分拖动显示-滚动条
- Android Textview 显示固定字数 省略号表示多余部分
- 截取固定长度字符串显示在页面,多余部分显示为省略号(区分汉字和字符)
- 截取固定长度字符串显示在页面,多余部分显示为省略号(区分汉字和字符)
- Win10系统Snap分屏功能把屏幕分成多个部分独立显示
- HTML怎么让table中的td内容过长显示为固定长度,多余部分用省略号代替