Question

我有一个按以下部分组成的网页：

var i:Number, j:Number;
for (i = 0; i < 1000; i++)
{
    // create the 4 columns 
    a[i] = [4];     // you can write it : a[i] = new Array(4);

    for (j = 0; j < 4; j++)
    {
        a[i][j] = 0;
    }
}

我想根据浏览器的屏幕高度自动拉伸trace(a[0][0]); // gives : 0 trace(a[255][2]); // gives : 0 trace(a[255][5]); // gives : undefined, because we have only 4 columns trace(a[1500][0]); // gives : undefined, because we have only 1000 rows部分以适应高度。

我尝试过使用CSS：

<body id="top">
  <section id="nav">

  </section>
  <div id="intro">

  </div>
  <div id="main">

  </div>
  <div id="footer">

  </div>
</body>

但由于某种原因，第二个分组intro与#intro { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; }部分重叠，并且在main部分之后没有显示intro部分。{ / p>

我在这里缺少什么？我应该使用jQuery来获得屏幕高度吗？

Answer 1

要将简介部分设置为浏览器屏幕的高度，您可以使用vh

#intro {
 height:100vh;
}

用屏幕高度缩放

Answer 2

你需要为body和html设置高度：100％，然后你应该考虑其他元素给它们一些绝对或固定位置以防止溢出，或者你可以使用定位

1

body,html {
   height:100%
}
#otherElement {
   position: absolute       
}

2

#intro {         
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
    z-index: 10/* if needed*/
}

Answer 3

对于更多浏览器支持的解决方案，jQuery是可行的方法。

function resizeIntro(){
    $('#intro').height($(window).height());   
}
resizeIntro();
$(window).resize(resizeIntro);

http://jsfiddle.net/c1du9k94/1/

适合屏幕问题的网页

3 个答案: