HTML5和CSS中的滑块位置问题

Question

我想将主滑块放在主导航后面，因此我将导航position设置为fixed，滑块位置设置为绝对。它工作正常，但由于某种原因，整个页脚元素移动到导航和滑块下方。我尝试过min-width并向滑块显示block，但它无效。

这是我的示例代码。

导航HTML：

<nav>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</nav>

滑块HTML：

<div class="slider">
  Slider Items Here
</div>

页脚Html：

<footer>
</footer>

CSS代码

nav {
    top: 0px;
    position: fixed;
    z-index: 99999;
}

.slider {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 0;
    min-height: 600px;
    display: block;
}

footer {
    display: block;
}

以下是目前的情况：

Answer 1

如评论中所述，您应将页眉和页脚位置设置为absolute（前者位于顶部，后者位于底部），然后从滑块中删除absolute。

然后您的滑块将是整页，页眉和页脚将始终位于正确的位置。

Answer 2

＆＃13;

＆＃13;

<div class="wrapper">
  <header>I'm a 30px tall header</header>
  <main>I'm the main-content filling the void!</main>
  <footer>I'm a 30px tall footer</footer>
</div>

＆＃13;

Like This ......You want!!
at the top of Header and inside header Nav Bar ... In Main Section Slider And Below Footer ! 

http://codepen.io/enjikaka/pen/zxdYjX

＆＃13;

＆＃13;

＆＃13;

{{1}}