请教一个关于DIV布局的问题,我的代码如下:
<%--<!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 runat="server">
    <title>无标题页</title>
    <style>
    body
    {
    overflow:hidden;
            font-size:9pt;
    }    #navi{
    width:100%;height:25px;
    border-left:1px solid #8295C0;
    padding:6px 0 0 25px;
    color:#FFFFFF;
    font-weight:bold;
    background-color:Aqua;
    }
    #context{
    width:100%;
    overflow:auto;
    }    #scroll_header{
    width:100%;
    overflow:hidden;
    height:30px;
    background-color:Blue;
    }
    #scroll_data{
    width:100%;
    overflow:auto;
    /*Moved from the html's element which id is scrool_data*/
    
    background-color:GrayText;
    }
    #buttons{
    width:100%;
    background:#4D69A6;
    border-left:1px solid #8295C0;
    text-align:right;
    padding:3px 5px;
    height:30px;
    }
    </style>    <script>
    function initdiv(){
    $("context").style.height=document.body.clientHeight-$("navi").offsetHeight-$("buttons").offsetHeight;
    $("scroll_data").style.height=$("context").offsetHeight-$("query").offsetHeight-$("scroll_header").offsetHeight-32;
    }    function $(ObjID){
        return document.getElementById(ObjID);
    }
    </script></head>
<body onload="initdiv();">
    <form id="form1" runat="server">
        <div id="navi">
            >>导航栏
        </div>
        <div id="context">
            <div id="query">
                查询
            </div>
            <div id="scroll_header">
                列标题
            </div>
            <div id="scroll_data">
                数据<br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
        </div>
        <div id="buttons">
            按钮
        </div>
    </form>
</body>
</html>被我注释掉的是W3C的标准,这样的文件能正常显示,但是如果不注释掉W3C标准的话,页面就不能正常显示的,如果加上W3C的标准,怎么才能让页面正常显示?

解决方案 »

  1.   

    你可以选用别的标准。
    如果你非要选用你注视掉的标准,
    就改代码为规范的XHTML 1.0 标准,详细标准可以网上查到。
    我们公司现在用更严格的标准,呵呵
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      

  2.   

    width:100%;
    这样的不太对吧,w3c里面不可以这样写的,我以前写了,似乎不起作用width:auto; 这样试试
      

  3.   

    以前显示很正常的页面,如今搬到vs2005(w3c标准)下面就面目全非,实在是很不爽啊
      

  4.   

    你可以用这个标准试试 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >