Javascript 防止视口上的全屏div与它下面的内容重叠 我在处理地基6的轨道上遇到了问题。我将“动态观察”设置为视口（浏览器窗口）上的全屏。我打开浏览器的开发者工具，看到动态观察与下面的标题重叠（尝试调整开发者工具/代码笔控制台的大小）。我不知道这是不是一个错误。请看一看

HTML

我还面临另一个问题。有时，动态观察滑块的高度被切断，当我刷新页面时，高度变得正常。有时也会出现空白/白色幻灯片，刷新页面是为了恢复正常。我不知道这是基金会的轨道错误还是我的浏览器的渲染问题。我想为这些问题找到一些解决方案

---

多谢各位

重叠？这是控制台导致的，关闭控制台，应该可以吗？我看不到codepen有任何问题。@DanielH是的，但如果我使用100vh，轨道不会与下面的内容重叠。我觉得我需要知道这个问题？为什么会这样？如果您打开浏览器的开发人员工具，情况也是一样。@j-printemps尝试打开浏览器的开发人员工具并垂直调整其大小，您将看不到下面的“Hello”内容。

<div class="orbit" role="region" aria-label="Slideshow" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
      <ul class="orbit-container">
        <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
        <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
        <li class="is-active orbit-slide bg1"></li>
        <li class="orbit-slide bg2"></li>

      </ul>
    </div>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

html{
    height: 100%;
}

body{
    height: 100%;
    font-family: 'Roboto', Arial, sans-serif;
}

.orbit, .orbit-container, .orbit-slide{
    height: 100%;
}

.orbit-slide.bg1{
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('http://2.bp.blogspot.com/-3OF7s7u97QM/VeaBIMsZEBI/AAAAAAAACJo/Uy8rmeqdNDg/s1600/Gambar-Konyol-Lucu-Gila-Unik-Aneh-14.jpg') center center/cover no-repeat fixed;
}

.orbit-slide.bg2{
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('http://1.bp.blogspot.com/-9izs08OyhuU/VeaBPrheKHI/AAAAAAAACMQ/uUN7ELsMw_o/s1600/Gambar-Konyol-Lucu-Gila-Unik-Aneh-34.jpg') center center/cover no-repeat fixed;
}