使网页适合屏幕问题答案

【问题标题】：Fit webpage to screen issue使网页适合屏幕问题
【发布时间】：2015-09-07 21:58:27
【问题描述】：

我的网页由以下部分构成：

<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 部分重叠，并且在 intro 部分之后没有显示应有的 main 部分。

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

【问题讨论】：

为什么要放在介绍部分之后？您已经完全定位了#intro，因此它脱离了正常流程。
你能提供需要的结构吗？应该在介绍部分之前吗？
同时定义宽度和高度
absolute 定位使元素脱离正常布局，因此其余元素不再相对于#intro 定位，而是像#intro 元素一样放置在其下方不存在。（我只是想解释一下为什么你的 CSS 不起作用。正确的答案是使用 vh，正如 Simon 回答的那样）。

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

#intro {
 height:100vh;
}

vh 随屏幕高度缩放

【讨论】：