CODEWITHSUNDEEP
htmlcss
chris01
chris01

Reputation: 12311

HTML/CSS: Placing a DIV after a fixed DIV

I try to use a fixed div for a navigation header.

Jumping to the desired areas works well but the content-div starts at the very top.

How can I make it start AFTER the navi-div?

It should be very simple and without JS or big 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>

I but a sample here:

JSFiddle

Upvotes: 0

Views: 79

Answers (2)

ksav
ksav

Reputation: 20821

Add padding-top to the first content div, or a wrapper of all content divs.

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

Upvotes: 1

SuperDJ
SuperDJ

Reputation: 7661

Take a look at the following example

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

Upvotes: 0

Related Questions