布局小问题一个


两个DIV，上面的高度固定，下面的高度100%，但是在IE6下面有滚动条：<!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>
    <title>E </title>
    <style type="text/css">
        html,body{ height:100%; margin: 0px;  }
    </style>
</head>
<body> 
    <div style="width: 100%; height: 100px;">
    </div>    
    <div style="width: 100%; height: 100%; background-color:orange;">
        文字文字文字文字文字文字
    </div>  
</body>
</html>    IE6怎么能不出滚动条，并且下面的DIV里面的文字也要能显示，谁帮看下，谢了。

解决方案 »

  1.   

    支持expression的浏览器都OK
    <!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>
        <title>E </title>
        <style type="text/css">
            html,body{ height:100%; margin: 0px;  }
        </style>
    </head>
    <body> 
        <div style="width: 100%; height: 100px;">
        </div>    
        <div style="width: 100%; height:expression(document.body.clientHeight-100); background-color:orange;">
            文字文字文字文字文字文字
        </div>  
    </body>
    </html>
      

  2.   

    不好意思，忘记说了，FF、IE7也要考虑的。
      

  3.   

    这样子行不行
    <!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>
        <title>E </title>
        <style type="text/css">
            html,body{ height:100%; margin: 0px;  }
        </style>
    </head>
    <body onload="document.getElementById('div2').style.height=(document.body.clientHeight-100)+'px';"> 
        <div style="width: 100%; height: 100px;">
        </div>    
        <div id="div2" style="width: 100%; height:0px; background-color:orange;">
            文字文字文字文字文字文字
        </div>  
    </body>
    </html>
      

  4.   

    窗口拖动的时候，下面的大小就不变化了，如果样式搞不定的话，我按照你的思路试一试onresize吧。
      

  5.   

    <!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>
        <title>E </title>
        <style type="text/css">
            html,body{ height:100%; margin: 0px;  }
        </style>
        <script>
         window.onload = setDivHeight;
         window.onresize = setDivHeight;
         function setDivHeight(){
         document.getElementById('div2').style.height = "0px";
         document.getElementById('div2').style.height=(document.body.clientHeight-100)+'px';
         }
        </script>
    </head>
    <body> 
        <div style="width: 100%; height: 100px;">
        </div>    
        <div id="div2" style="width: 100%; height:0px; background-color:orange;">
            文字文字文字文字文字文字
        </div>  
    </body>
    </html>