HTML/CSS : Placing a DIV after a fixed DIV

Question

我尝试为导航标题使用固定的 div。

跳转到所需区域效果很好，但 content-div 从最顶部开始。

如何让它在 navi-div 之后启动？

它应该非常简单，没有 JS 或大 CSS。

<div style="position: fixed; width: 100%; top: 0; background: white; border: 1px solid blue; height: 30px; margin: 10px;">
<a href="#aaa">gotoA</a>
<a href="#bbb">gotoB</a>
<a href="#ccc">gotoC</a>
</div>


	<div id="aaa" style="background: yellow;">
	a*<br>
	a1<br>
	a2<br>
	a3</br>
	a4</br>
	a5</br>
	a6</br>
	a7</br>
	a8</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a</br>
	a+</br>
	</div>

	<div id="bbb" style="background: orange;">
	b*</br>
	b1</br>
	b2</br>
	b3</br>
	b4</br>
	b5</br>
	b6</br>
	b7</br>
	b8</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b</br>
	b+</br>
	</div>

	<div id="ccc" style="background: lime;">
	c*</br>
	c1</br>
	c2</br>
	c3</br>
	c4</br>
	c5</br>
	c6</br>
	c7</br>
	c8</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c</br>
	c+</br>
	</div>

我这里只是一个例子:

JSFiddle

Answer 1

将 padding-top 添加到第一个内容 div，或所有内容 div 的包装。

<div style="position: fixed; width: 100%; top: 0; background: white; border: 1px solid blue; height: 30px; margin: 10px;">
  <a href="#aaa">gotoA</a>
  <a href="#bbb">gotoB</a>
  <a href="#ccc">gotoC</a>
</div>


<div id="aaa" style="background: yellow; padding-top: 50px">a*<br>a1<br>a2<br>a3<br>a4<br>a5<br>a6<br>a7<br>a8<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a+<br></div>

<div id="bbb" style="background: orange;">b*<br>b1<br>b2<br>b3<br>b4<br>b5<br>b6<br>b7<br>b8<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b+<br></div>

<div id="ccc" style="background: lime;">c*<br>c1<br>c2<br>c3<br>c4<br>c5<br>c6<br>c7<br>c8<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c+<br></div>