JS设定DIV宽度和高度。

本帖最后由 changjay 于 2010-09-28 18:52:51 编辑

解决方案 »

  1.   

    http://community.csdn.net/IndexPage/SmartQuestion.aspx
      

  2.   

    <body style="width:100%;height:100%;margin:0;padding:0;display:table">
    <div id="001" style="border:1px solid #000;display:table-row;">
    <div style="display:table-cell;background-color:#333;">
    <div id="002" style="float:left;width:200px;height:100%;background-color:#eee;padding:0;border:1px solid #f00;">bbb</div>
    <div id="003" style="background-color:#333;padding:0;">ccc</div>
    </div>
    </div>
    <div style="display:table-row;">
    <div id="004" style="height:200px;background:#8a8;margin:0;padding:0;display:table-cell">aaa</div>
    </div>
    </body>不知道可以不
      

  3.   

    ajccom不行啊，3个DIV并没有占满全屏。
      

  4.   

    怎么我用你的代码测试他是Ok的呢？ 我是用IE8 和 360浏览器
      

  5.   

    在FF和IE6、7中测试通过：<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>无标题页</title>
        <style type="text/css">
            body{margin:0; padding:0; border:none 0; }
        </style>
    </head>
    <body id="bodyer" style="width:100%; height:100%;" onload="changeSize();">
    <div style="width:100%; height:100%;">
        <div id="div002" style=" float:left; width:200px;background-color:Aqua; "></div>
        <div id="div003" style=" float:right; background-color:Black;"></div>
        <div style="clear:both;"></div>
        <div id="div004" style="width:100%; height:200px; background-color:Green;"></div>
    </div>
    <div style="clear:both;"></div></body>
    </html>
    <script type="text/javascript">
        function changeSize(){
            if(document.all){
                totalWidth=document.getElementById("bodyer").clientWidth;
                totalHeight=document.getElementById("bodyer").clientHeight;
            }
            else
            {
                totalWidth = window.innerWidth;
                totalHeight =window.innerHeight;
            }
            document.getElementById("bodyer").style.width=totalWidth+"px";
            document.getElementById("bodyer").style.height=totalHeight+"px";
            document.getElementById("div002").style.height=totalHeight-200+"px";
            document.getElementById("div003").style.width=totalWidth-200+"px";
            document.getElementById("div003").style.height=totalHeight-200+"px";
        };
    </script>
      

  6.   

    Wilson_Zhong，你的代码可以正确显示，谢谢你。不过打开页面时效率有点慢，我随便在各个DIV里打了几个字，在我的机器里IE6下测试，打开页面后，各种颜色的版块都集中在上方，要过1秒钟左右才能正常平铺到整个页面，然后正常显示。我自己也看了点JS的教程，写了下面这一段<script type='text/javascript'>    function showDims() {        mydiv = document.getElementById('003');        alert(mydiv.scrollWidth+'x'+mydiv.scrollHeight);    }</script>
    <body onload="showDims()" style="width:100%;height:100%;margin:0;padding:0;">
    <div id="004" style="float:left;position:absolute;width:100%;height:200px;background:green;bottom:0px;margin:0;padding:0;">
        aaa
    </div>
    <div id="001" style="float:left;position:absolute;width:100%;height:100%;bottom:200px;margin:0;padding:200px 0 0 0;">
        <div id="002" style="float:left;width:200px;background-color:blue;height:100%;margin:0;padding:0;">
            bbb
        </div>
        <div id="003" style="background-color:red;height:100%;margin-left:200px;margin:0;padding:0;">
            ccc    
    </div>
    </div>
    </body>
    IE6下面可以正常显示，但是加了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">之后就会产生错误，DIV001被抬高到TOP外面去了。
    如何才能标准化代码？