HTML5和CSS中的滑块位置问题
HTML5和CSS中的滑块位置问题
提问于 2017-04-08 23:35:31
我想把主滑块放在主导航后面，所以我已经将导航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;
}这里是它现在的样子：
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-09 06:46:57
正如注释中所说的，您应该将页眉和页脚位置设置为absolute (前者位于顶部，后者位于底部)，并从滑块中删除absolute。
然后你的滑块将是全页，页眉和页脚将始终在正确的位置。
Stack Overflow用户
发布于 2017-04-08 23: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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43304194
复制相关文章
![.NET面试题系列[1] - .NET框架基础知识(1)](https://ask.qcloudimg.com/http-save/yehe-3216576/2ghz3bk1l4.png)
点击加载更多
相似问题
CTS和CLS的关系是什么？
.NET CIL码大小
在.net中混淆CTS
[CTS]android.net.cts.DnsTest#testDnsWorks-失败
评估堆栈的.NET CIL操作
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
