剛寫了一個左右拖動改變內容寬度的例子，自己又改了一下，做了一個上下拖動改變高度的例子，後面需要的話，可以直接拿來用，哈哈哈。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
ul,li{
margin:0;
padding:0;
}
body{
font:14px/1.5 Arial;
color:#666;
}
#box{
position:relative;
width:600px;
height:400px;
border:2px solid #000;
margin:10px auto;
overflow:hidden;
}
#box ul{
list-style-position:inside;
margin:10px;
}
#top,#bottom{
color:#FFF;
width:600px;
height:200px;
overflow:hidden;
}
#top{
background:green;
}
#bottom{
background:skyblue;
position: absolute;
/*float:right*/
}
#line{
position:absolute;
top:50%;
left:0;
height:4px;
width:100%;
overflow:hidden;
background:red;
cursor:s-resize;
}
</style>
</head>
<body>
<center>上下拖動紅條可改變顯示區域寬度<span id="msg"></span></center>
<div id="box">
<div id="top">
上
</div>
<div id="bottom">
下
</div>
<div id="line"></div>
</div>
<script>
function $(id) {
return document.getElementById(id);
}
window.onload = function() {
var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line");
oLine.onmousedown = function(e) {
var disY = (e || event).clientY;
oLine.top = oLine.offsetTop;
document.onmousemove = function(e) {
var iT = oLine.top + ((e || event).clientY - disY);
var e=e||window.event,tarnameb=e.target||e.srcElement;
var maxT = oBox.clientHeight - oLine.clientHeight;
oLine.style.margin = 0;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
oLine.style.top = oTop.style.height = iT + "px";
oBottom.style.height = oBox.clientHeight - iT + "px";
$("msg").innerText='top.width:'+oLine.style.height+'---bottom.height:'+oBottom.style.height+'---oLine.offsetHeight:'+oLine.offsetHeight+'---disY:'+disY+'---tarnameb:'+tarnameb.tagName;
return false
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
oLine.releaseCapture && oLine.releaseCapture()
};
oLine.setCapture && oLine.setCapture();
return false
};
};
</script>
</body>
</html>
若想變爲自適應的，可以把寬高設置爲百分比。