固定标头以上不固定肚脐

Question

所以我有这样的标记：

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
        <button id='edit'>
            <i class="fa fa-pencil"></i>
        </button>
        <button id='check'>
            <i class="fa fa-check"></i>
        </button>
        <button id='trash'>
            <i class="fa fa-trash-o"></i>
        </button>
    </span>
</header>

<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
...

我希望标题是固定的，而导航条是滚动的。

因此，我将其添加到CSS中：

header {
  position: fixed;
  width: 100%;
  z-index: 1000;
}

nav { 
  margin-top: 1em;
}

但结果不是我想要的。我试着将clear: both添加到每个元素中，但是没有什么改变。

编辑： 这是它的样子，但是头应该是固定的。

Answer 1

您需要将标题的高度设置为固定的高度(在em或px中)。然后用相同的数字给你的身体添加一个填充顶部。

body {
    background: #e5e5e5;;
    font-family: 'Roboto Condensed', 'Calibri', 'Arial', sans-serif;
    margin: 0; padding: 0;
    color: #444;
    height: 2000px;
    padding-top: 50px;
}

header {
    background: #4285f4;
    color: white;
    padding: 12px;
    padding-left: 15px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    height: 26px;
    margin: 0;
    top: 0;
}

把导航的边缘拿走。

看看这个小提琴。

Answer 2

为导航和页面的其余部分添加包装器div，并设置页边距顶以清除页眉div。

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
    <button id='edit'>
        <i class="fa fa-pencil"></i>
    </button>
    <button id='check'>
        <i class="fa fa-check"></i>
    </button>
    <button id='trash'>
        <i class="fa fa-trash-o"></i>
    </button>
    </span>
</header>

<div id='wrapper'>
<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
</div>

CSS：

header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  top:0;
}

.wrapper { 
  margin-top: 3em;
  display:block;
}