文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5和CSS中的滑块位置问题

问HTML5和CSS中的滑块位置问题
EN

Stack Overflow用户

提问于 2017-04-09 07:35:31

回答 2查看 1.7K关注 0票数 0

我想把主滑块放在主导航后面，所以我已经将导航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;
}

这里是它现在的样子：

css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-09 14:46:57

正如注释中所说的，您应该将页眉和页脚位置设置为absolute (前者位于顶部，后者位于底部)，并从滑块中删除absolute。

然后你的滑块将是全页，页眉和页脚将始终在正确的位置。

票数 1

Stack Overflow用户

发布于 2017-04-09 07:45:44

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer {
  height: 30px;
}

main {
  flex: 1;
}

body {
  margin: 0;
}

header {
  background-color: #2ecc71;
}

main {
  background-color: #ecf0f1;
}

footer {
  background-color: #2c3e50;
  color: white;
}

<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>

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43304194

复制

相似问题

问HTML5和CSS中的滑块位置问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5和CSS中的滑块位置问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5和CSS中的滑块位置问题
EN