代码之家 › 专栏 › 技术社区 › chris01

html/css:将一个DIV放在固定的DIV之后

css html

chris01 · 技术社区 · 5 年前

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

跳到所需的区域效果很好,但是content 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

2 回复 | 直到 5 年前

ksav 5 年前

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

SuperDJ Franklin Rivero 5 年前

请看下面的示例

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