聘我网

新概念招聘3.0

div 实现高度自动填充浏览器

vote up0vote downstar
<div id="main">
<div id="head"></div>
<div class="kongbai"></div>
<div id="main"></div>
<div class="kongbai"></div>
<div id="button"></div>
<div class="kongbai"></div>
<div id="bottom"></div>
</div>

要求是

此标签随浏览器的变换而变化,head、main、button、bottom的高度固定不变,布满整个浏览器。 请教高手,如何实现 具体代码,谢谢!

 
是说要使main充满整个屏幕吗? - Shore 2009-11-11, 04:45

1 个答复

vote up0vote down

很多浏览器对height:100%的支持都不是很好,这里提供一种js解决

div#test始终布满浏览器

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("这是脚本运行前的效果。点“确定”查看运行后的效果。");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>
链接

您的回答





不是您要找的问题? 浏览其他含有标签 的问题或者 自己问个.