Drew Adams Drew Adams - 2 months ago 7
CSS Question

HTML/CSS Anchoring above anchor div

I'm using several anchors on a page using the negative margin approach to account for my fixed header (50px). When each section had a specified height, the anchors worked great. When I changed them to work dynamically based on content, they anchor about 5px above where they should, leaving a small sliver of space that's causing issues with my side nav bullets (color changes based on the anchor you're at). Currently, jQuery is generating the code for the anchoring, but I've hard-coded href's to the links without any change. Any thoughts?
Here's a snippet of the HTML:


<div id="main-anchor" class="anchor"></div>
<section class="main page-section">
<div class="section-heading">


Anchor class:

.anchor {
content: "";
display: block;
height: 50px;
margin-top: -50px;
padding: 0;
position: relative;
top: 0;
}


the white line in the red shouldn't be showing

*Edit: Solution - I had two instances of the div height in jQuery, the latter of which was 51 rather than 50 pixels which was creating the gap above my anchor.

Answer

Solution without javascript

Demo: http://jsbin.com/warixef/1/edit?html,css,output

body {
  margin: 0;
  margin-top: 50px;
  color: white;
  font-family: sans-serif;
  text-align: right;
  max-width: 400px;
}
a {color: white;}
.fixed-header {
  background: slateblue;
  padding: 1em;
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}
.page-section {
  background: lightblue;
  padding: 1em;
}
.section-heading {
  font-size: 110%;
  display: block;
  margin: 1em 0;
  text-decoration: none;
}
.section-heading:hover {
  text-decoration: underline;
}
.anchor {
  position: relative;
  top: -50px;
}
.section-content h1 {
  text-align: left;
}
footer {
  text-align: left;
  background: slateblue;
  padding: 1em;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="fixed-header">Fixed Header</div>
    <div id="main-anchor" class="anchor"></div>
    <section class="main page-section">
      <a href="#title1" class="section-heading">#Anchor1</a>
      <a href="#title2" class="section-heading">#Anchor2</a>
      <a href="#title3" class="section-heading">#Anchor3</a>
      <div class="section-content">
        <div id="title1" class="anchor"></div>
        <h1>Title 1</h1>
        <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
        <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
        <div id="title2" class="anchor"></div>
        <h1>Title 2</h1>
        <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
        <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
        <div id="title3" class="anchor"></div>
        <h1>Title 3</h1>
        <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
        <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p>
      </div>
    </section>
    <footer><a href="http://stackoverflow.com/questions/39780187/html-css-anchoring-above-anchor-div">SO Answer</a> </footer>
  </body>
</html>