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

在第一个内容div或所有内容div的包装中添加padding-top。

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

Answer 2

看看下面的例子

#aaa {
  background: yellow;
  margin-top: calc(var(--menu-height) + (2 * var(--menu-margin))); /* 2 * margin for top and bot */
}

#bbb {
  background: orange;
}

#ccc {
  background: lime;
}

.menu {
  position: fixed; 
  width: 100%; 
  top: 0; 
  background: white; 
  border: 1px solid blue; 
  height: var(--menu-height); 
  margin: var(--menu-margin);  
}

:root {
  --menu-height: 30px;
  --menu-margin: 10px;
}

<div class="menu">
<a href="#aaa">gotoA</a>
<a href="#bbb">gotoB</a>
<a href="#ccc">gotoC</a>
</div>


	<div id="aaa">
	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">
	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">
	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>

HTML / CSS：在固定DIV之后放置DIV

2 个答案: