Jquery 使网页适合屏幕问题_Jquery_Html_Css_Responsive Design

Jquery 使网页适合屏幕问题

jquery html css responsive-design

Jquery 使网页适合屏幕问题,jquery,html,css,responsive-design,Jquery,Html,Css,Responsive Design,我有一个按章节结构的网页，如下所示： <body id="top"> <section id="nav"> </section> <div id="intro"> </div> <div id="main"> </div> <div id="footer"> </div> </body> 但是由于某种原因，第二个divmain与intr

我有一个按章节结构的网页，如下所示：

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

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

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

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

  </div>
</body>

但是由于某种原因，第二个div

main

与

intro

部分重叠，并且在

intro

部分之后未按预期显示

main

部分

我错过了什么？我应该首先使用jQuery获取屏幕高度吗

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

vh

#intro {
 height:100vh;
}

vh随屏幕高度缩放对于更多浏览器支持的解决方案，jQuery是一个不错的选择

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

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

一,

二,

为什么要在介绍部分之后？你已经完全定位了#intro，因此它被排除在正常流程之外。你能提供所需的结构吗？它是否应该在介绍部分之前？定义宽度和高度也

绝对定位将元素从正常布局中移除，因此您的其余元素不再相对于#intro
定位，而是放在它下面，好像#intro
元素不存在一样。（我只是想解释为什么你的CSS不起作用。正确的答案是使用Simon回答的vh）。谢谢Simon的回答。这正是我所需要的！所有浏览器都支持吗？本网站显示了对vh设备的支持。正如你所看到的，IE8和更早版本不支持它。谢谢你的快速回复，我会检查它。谢谢你的输入，但我想我会尝试完成它的高度：100vh，这正是我所需要的。我将尝试检查脚本，以包括其他不兼容的浏览器。
function resizeIntro(){
    $('#intro').height($(window).height());   
}
resizeIntro();
$(window).resize(resizeIntro);

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*/
}