前言
鼠标拖动该DIV实现自动改变高度扩展内容显示区域。
以下是一个设计原型，基于jQuery实现，只实现了拖动效果，没有做页面美化，可以根据需求做相应修改。
转自：/xyd21c/p/4456471.html
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="en" xmlns="/1999/xhtml" lang="en"><head><title>Div随鼠标拖动改变高度</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="jquery-1.8.3.min.js"></script><style type="text/css">html, body{ height: 100%; margin: 0; padding: 0; }#footer { position:fixed; bottom:0; left:0; width:100%; height:30px; background-color:#B8D0FA;}#expander{ width:100%; height:6px; background-color:#999;}#expander:hover{ cursor:n-resize;}</style><script>$(function(){var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight = 30;$("#expander").mousedown(function(e){src_posi_Y = e.pageY;is_mouse_down = true;});$(document).bind("click mouseup",function(e){if(is_mouse_down){is_mouse_down = false;}}).mousemove(function(e){dest_posi_Y = e.pageY;move_Y = src_posi_Y - dest_posi_Y;src_posi_Y = dest_posi_Y;destHeight = $("#footer").height() + move_Y;if(is_mouse_down){$("#footer").css("height", destHeight > 30 ? destHeight : 30);}});});</script></head><body><div style="width:100%; height:1000px; background-color:#F2F2F2;"></div><div id="footer"><div id="expander"></div><span id="info">It's Your Contents !</span></div></body></html>
