How to position a div below a fixed position div?

Question

I have a navigation bar that has a fixed position. Now the rest of my content gets put below this navigation bar since the position of that bar is fixed. How can I position the rest of my content below my fixed navigation bar?

https://gyazo.com/dad3fc7fc35e65a4ad73fd0da2c6ffa7 As you can see a part of my content disappears below my fixed navigation bar.

<div class="header" id="header">

    <div class="menu1" id="menu1">

        <div class="name">Jan de Sterke</div>

        <div class="menu_item_holder">
            <div class="menu_item"><a href="index.php">Home</a></div>
            <div class="menu_item"><a href="sco.php">SCO</a></div>
            <div class="menu_item"><a href="uex.php">UEX</a></div>
            <div class="menu_item"><a href="dev.php">DEV</a></div>
        </div>

    </div>
</div>

CSS

.header {
    width: 100%;
    background: #1C2023;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    bottom: 0;
    padding: 2.5% 0 2.5% 0;
    transition: all 0.5s;
}

De div below my navigation bar is a colored line.

CSS for this line:

    .headerpic {
        width: 100%;
        height: 5px;
        background: #fc4a1a;
    }

I have tried to use the following JavaScript code to fix the problem, but it is not working.

    let heightvalue = document.getElementById('header').offsetHeight;
    let content = document.getElementById('headerpic');
    content.style.marginTop = heightvalue + "px";

---

My JavaScript code is actually working.

let heightvalue = document.getElementById('header').offsetHeight;
let content = document.getElementById('headerpic');
content.style.marginTop = heightvalue + "px";

I don't know why it wasn't working before. Next problem is that this margin-top value needs to be re-calculated everytime the window gets resized. Currently it calculates a value and sets it as a margin-top at the beginning of the loading. When I resize the window this same value stays there, which causes blank spaces to appear.

EDIT: This problem can be solved by rerunning the code on the window resize event. (JavaScript window resize event) The code for my page is:

window.onresize = function(event) {
    let heightvalue = document.getElementById('header').offsetHeight;
    let content = document.getElementById('headerpic');
    content.style.marginTop = heightvalue + "px";
};

Answer 1

Using CSS flexbox might help avoid having to use JavaScript, although it's difficult to model without the actual content you are using.

html {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  flex-shrink: 0;
}

.header {
  color: #fff;
  flex-shrink: 0;
  width: 100%;
  background: #1C2023;
  padding: 5px 0 5px 0;
  transition: all 0.5s;
  border-bottom: 5px solid #fc4a1a;
}

.content {
  flex-grow: 1;
  overflow-y: auto;
}

<div class="header">
  HEADER
</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id commodo neque, ac suscipit lorem. Pellentesque quis elit eget ipsum mollis finibus in eget enim. Maecenas dictum ipsum metus, quis consequat erat dictum vitae. Nam commodo mi a tempus
    vehicula. Praesent sit amet dignissim tellus. In ornare mi quis neque luctus tempor. Sed eleifend massa magna, semper pharetra odio tempor nec. Nam cursus pharetra condimentum. Etiam gravida tortor sit amet risus commodo ultrices. Integer accumsan
    velit et velit tempor tempus. Nam ornare consequat lorem, vel vulputate massa lobortis rhoncus. Vivamus placerat augue sed egestas porttitor.</p>

  <p>Integer tincidunt cursus est, at ultricies enim. Ut tempor eleifend sapien, in bibendum nisl rutrum a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat magna justo, at euismod turpis porta et. Curabitur lobortis efficitur
    erat eu consectetur. Sed faucibus tincidunt malesuada. Integer ut lectus odio. Etiam venenatis purus eget mauris laoreet maximus. Integer volutpat, felis sit amet iaculis vestibulum, tellus enim scelerisque odio, sed dapibus diam ante ut justo. Donec
    ac scelerisque purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat porta pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

  <p>Fusce facilisis nisl condimentum, gravida odio blandit, rhoncus quam. Etiam eu est tincidunt, volutpat neque quis, consequat mi. Aliquam erat volutpat. Nam varius leo non felis sollicitudin, ac aliquam tellus euismod. Donec mollis luctus ante ut tincidunt.
    Cras purus enim, vehicula eget placerat feugiat, tempus non lorem. Sed vestibulum purus eget leo dictum lobortis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id commodo neque, ac suscipit lorem. Pellentesque quis elit eget ipsum mollis finibus in eget enim. Maecenas dictum ipsum metus, quis consequat erat dictum vitae. Nam commodo mi a tempus
    vehicula. Praesent sit amet dignissim tellus. In ornare mi quis neque luctus tempor. Sed eleifend massa magna, semper pharetra odio tempor nec. Nam cursus pharetra condimentum. Etiam gravida tortor sit amet risus commodo ultrices. Integer accumsan
    velit et velit tempor tempus. Nam ornare consequat lorem, vel vulputate massa lobortis rhoncus. Vivamus placerat augue sed egestas porttitor.</p>

  <p>Integer tincidunt cursus est, at ultricies enim. Ut tempor eleifend sapien, in bibendum nisl rutrum a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat magna justo, at euismod turpis porta et. Curabitur lobortis efficitur
    erat eu consectetur. Sed faucibus tincidunt malesuada. Integer ut lectus odio. Etiam venenatis purus eget mauris laoreet maximus. Integer volutpat, felis sit amet iaculis vestibulum, tellus enim scelerisque odio, sed dapibus diam ante ut justo. Donec
    ac scelerisque purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat porta pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

  <p>Fusce facilisis nisl condimentum, gravida odio blandit, rhoncus quam. Etiam eu est tincidunt, volutpat neque quis, consequat mi. Aliquam erat volutpat. Nam varius leo non felis sollicitudin, ac aliquam tellus euismod. Donec mollis luctus ante ut tincidunt.
    Cras purus enim, vehicula eget placerat feugiat, tempus non lorem. Sed vestibulum purus eget leo dictum lobortis.</p>
</div>

EDIT: Removed additional div and styled body to use flexbox layout. Adjusted to make header div fixed.

Answer 2

An element that has position: fixed is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.

My recommendation is to set a margin-top to the content so that the top menu won't overlay it. You can do that with CSS like below:

#navBar {
    height: 40px;
    position: fixed;
    width: 100%;
    top:0
}
#content{
    margin: 40px auto 0;
    width: 100%;
}

Updated Solution for variable navbar height with a little Javascript:

CSS

#navBar {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

Javascript

$(document).ready(function() {
    var contentPlacement = $('#navBar').position().top + $('#navBar').height();
    $('#content').css('margin-top',contentPlacement);
});