１．
<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>
２．
<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>
３．
<!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;
}
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。