使网页适合屏幕问题

Question

我有一个网页，其结构如下：

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

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

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

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

  </div>
</body>

我希望根据浏览器屏幕高度自动拉伸intro部分以适合高度。

我尝试过CSS：

#intro {         
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}

但是由于某些原因，第二个div main重叠了intro部分，并且在main部分之后没有显示它应该显示的intro部分。

这里我漏掉了什么？我应该先用jQuery获取屏幕高度吗？

Answer 1

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

#intro {
 height:100vh;
}

vh随屏幕高度缩放

Answer 2

您需要为body和html设置高度:100%，然后您应该考虑其他元素，为它们提供一些绝对或固定的位置，以防止溢出，或者您可以使用position fix

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/