如何固定nav
和right
block ,同时保持整个容器centre
居中?
不使用js
http://jsfiddle.net/zujg22st/9/
我知道 position fixed
固定到浏览器而不是父级,所以它不能像 position absolute
那样简单地在相对 div 中使用 fixed
<div class="center">
<div class="nav">nav</div>
<div class="left">
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<!--..... a lot ->
</div>
<div class="right">right</div>
</div>
CSS
.center {
width: 400px;
background-color: red;
margin: 0 auto;
}
.nav {
width: 400px;
height: 30px;
background-color: yellow;
}
.left, .right {
width: 150px;
display: inline-block;
vertical-align: top;
}
.left {
background-color: green;
}
.right {
background-color: blue;
height: 40px;
}
最佳答案
所以我们在这里要做的是将 this 分成两部分。我们将在页面顶部创建一个标题和一个带有固定右侧 div 的正文。顶部的导航栏我们可以像这样制作一个固定的标题:
CSS:
#header{
position:relative;
height:30px;
width:400px;
margin: 0 auto;
}
HTML:
<div id="header">
<div class="nav">nav</div>
</div>
主体看起来像:
HTML:
<div class="center">
<div class="left">
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
</div>
<div class="right">right</div>
</div>
CSS:
#header{
position:relative;
height:30px;
width:400px;
margin: 0 auto;
}
.centerheader{
width: 400px;
margin: 0 auto;
position:relative;
}
.center {
width: 400px;
background-color: red;
margin: 0 auto;
}
.nav {
position:fixed;
width: 400px;
height: 30px;
background-color: yellow;
}
.left, .right {
width: 150px;
display: inline-block;
vertical-align: top;
}
.left {
background-color: green;
}
.right {
position:fixed;
background-color: blue;
height: 40px;
}
.right {
margin-left: 3px;
position: fixed;
}
body{
margin: 0 auto;
}
作为旁注,我修改了底层 body {margin: 0 auto;}
。在 jsfiddle 中, body 周围有一个边距,当你有一个标题时它会导致丑陋。
关于html - 如何固定导航和右侧 block ,同时保持整个容器居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25254646/