<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#mainTop
{
height:90px;
overflow:hidden;
}
#bottomLeft
{
height:100%;
width:15%;
float:left;
overflow:hidden;
position:relative;
}
#bottomRight
{
height:100%;
width:85%;
float:left;
overflow:hidden;
}
#split
{
width:10px;
height:100%;
background:black;
position:absolute;
right:0;
top:0;
}
#leftContent
{
height:100%;
overflow:auto;
margin-right:10px; /* 宽度和split的宽度一致 */
}
#rightContent
{
height:100%:
overflow:auto;
}
</style>
</head>
<body>
<div>
<div id="mainTop">c</div>
<div id="mainBottom">
<div id="bottomLeft">
<div id="split"></div>
<div id="leftContent">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabe
</div>
</div>
<!-- 为什么在bottomRight还套一个rightContent：当对bottomRight设置margin或padding会将它占的位置加上
margin或padding的宽度，导致溢出。在里面再套一个rightContent，让rightContent的宽度自动，当设置rightContent的margin或padding时，它占的整体位置不变，会将内容的宽度自动变小，
margin或padding的宽度+width=rightContent的宽度
-->
<div id="bottomRight">
<div id="rightContent">b</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
<script type="text/javascript">
var docHeight = document.documentElement.clientHeight;
var mainBottom = document.getElementById("mainBottom");
// 90：是mainTop的高度
mainBottom.style.height = (docHeight - 90).toString() + "px";
document.getElementById("bottomLeft").onscroll = function() {
document.getElementById("split").style.position = "absolute";
document.getElementById("split").style.right = "2px";
};
</script>
</html>