写不出来呀！！

代码如下图片在这问题说明: 不大习惯用一图片的不同地方当背景,所以在写的过程中觉得很别扭,问题在注释的地方<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Drag!!!</title>
<style type="text/css">
.containter{height:400px; width:400px; border:1px solid #000000; position:absolute}
.title{height:26px; width:auto; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103444839.p.gif');}
.titleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
.titleico{float:right; height:20px;  width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');background-position:-21px 0px}
.body{height:374px; width:auto; background-color: #FFFFCC;}
.bottom{bottom:1px; right:1px;cursor:nw-resize;
        position:absolute;
background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');
background-position:-42px -10px;
        width:10px;
        height:10px;
        z-index:5;
        font-size:0;}
</style>
</head>
<body style="font-size:12px;">
    <div id='ggg' class="containter">
        <div class="title">
        <div class="titleinfo">新闻标题</div><div class="titleico" onmouseover="ss(this)" onmouseout="ss(this)"></div>
        </div>
        <div class="body">123</div>
        <div class="bottom" onmousedown="gg()"></div>
    </div>
    
<script>
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
var $ = function (id) {
return  document.getElementById(id);
};
function ss(obj){
 obj.style.backgroundPosition =(obj.style.backgroundPosition=="0px 0px")?"-21px 0px":"0px 0px" //切换不同的背景是一般是这么写吗？？？
}
function gg(){
$('ggg').style.height=CurrentStyle($('ggg')).height =="400px"?"600px":"400px";  //因为body里面的高度是定死了的 所以放大后还是那么高  怎么做到自适应了?
}
</script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Drag!!!</title>
    <style type="text/css">
    .containter{height:400px; width:400px; border:1px solid #000000; position:absolute}
    .title{height:26px; width:auto; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103444839.p.gif');}
    .titleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
    .titleico{float:right; height:20px;  width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');background-position:-21px 0px}
    .body{height:374px; width:auto; background-color: #FFFFCC;}
    .bottom{bottom:1px; right:1px;cursor:nw-resize;
            position:absolute;
            background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');
            background-position:-42px -10px;
            width:10px;
            height:10px;
            z-index:5;
            font-size:0;}
    </style>
    </head>
    <body style="font-size:12px;">
        <div id='ggg' class="containter">
            <div class="title">
            <div class="titleinfo">新闻标题</div><div class="titleico" onmouseover="ss(this)" onmouseout="ss(this)"></div>
            </div>
            <div id="body" class="body">123</div>
            <div class="bottom" onmousedown="gg()"></div>
        </div>
        
    <script>
    var CurrentStyle = function(element){
        return element.currentStyle || document.defaultView.getComputedStyle(element, null);
    };
    var $ = function (id) {
        return  document.getElementById(id);
    };
    function ss(obj){
     obj.style.backgroundPosition =(obj.style.backgroundPosition=="0px 0px")?"-21px 0px":"0px 0px" //切换不同的背景是一般是这么写吗？？？
    }
    function gg(){
    $('ggg').style.height=CurrentStyle($('ggg')).height =="400px"?"600px":"400px";  //因为body里面的高度是定死了的 所以放大后还是那么高  怎么做到自适应了?
    $('body').style.height=CurrentStyle($('body')).height =="374px"?"574px":"374px";
    }
    </script>
    </body>
    </html>
      

  2.   

    这个不是好方法噢
    实际运用中 不会是onmousedown 应该是drag 会有太多次运算  
    实际中也不会是个定直  一开始又涉及一些运算 会比较麻烦...
    用css解决才是王道！~
      

  3.   

    其实这里和onresize是一条路.
    你要自适应.
    其实就是要自己做多一步对相应位置的更新.
    至于怎么更新比较方便就是看你自己的需要了.
      

  4.   

    虽然你可以用类似
    .body{height:93.5%; width:auto; background-color: #FFFFCC;}
    的CSS.
    但是.在你长度变化后.这个比例亦会有所变化的.
    除非你BODY是覆盖整个父DIV并置在底层.
      

  5.   

    不一定要用%分比噢  也可以尝试着margin -num padding num 虽然我没试出来
    其实倒是可以虚拟一个拖动框  只需要在onresize结束时计算一次什么意思  不明白！~