Question

如何修复nav和right块，同时保持整个容器centre居中？不使用js http://jsfiddle.net/zujg22st/9/

我知道position fixed已修复浏览器而不是父级，因此它不能简单地使用固定在相对div中，如position absolute

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

Answer 1

所以我们在这里要做的就是把它分成两部分。我们将在页面顶部创建一个标题，并使用固定的右侧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中，身体周围有一个边缘，当你有一个标题时会导致丑陋。

<强> FIDDLE

Answer 2

儿童div 相对于其父级不能fixed 。但到目前为止，这就是我所拥有的。我认为它会对你有帮助。

将position: fixed;设为.nav。向margin-top和.nav添加相同数量的.left作为.right的身高。在这种情况下，它是30px。然后将position: absolute; div设置为.right。

<强> DEMO

如何使导航和右侧块固定，同时保持整个容器位于中心位置？

2 个答案: