Question 43759 in Html Question posted in
Some basic documentation can be found here.

How to prevent position fixed navbar to cover the top content of the page – Html

How do I prevent the position fixed navbar to cover the top content of my page?

So I declared 100vh height for each page to my one page website. When I add the position fixed navbar which has the height of 50px, it covers up the 50px top content of my page. My desired output is to have a 100vh height for each page with a fixed navbar on top.

I tried adding margin, padding, and top value but is messes up the other page.

As far as I remember, I used calc to solve this problem before but I already forgot how to

Tags:

3

Answers


  1. 0

    try this

    height: calc(100vh - 50px);
    Login or Signup to reply.
  2. 0

    If you want to calc the height of your page based on navbar height, there are two ways:

    1. static calc (if you are sure what is the height of navbar)
    .page {
  height: calc(100vh-50px);
}
    1. dynamic calc, if you are not sure what si the height of navbar, you have to get it using ex. javascript

    he height of my page reduced 50px but the navbar still occupies the 50px of the top content (the navbar covers up the top content). how do I make the height of my navbar add to the height of the page that will result into 100vh?

    so you don’t need to make it fixed, just normal position like this

    <div class="fullHeight">
  <nav></nav>
  ...rest of your page
</div>

    then

    .fullHeight {
  height: 100vh;
}

    You don’t need fixed cuz u don’t want to cover top content and there is no need to keep it top (cuz 100vh means you won’t scroll your page)

    Anyway, if you still claim that you need position: fixed you can add padding-top: 50px to your page, bearing in mind that you need to add this 50px to your height calc (thats not a good solution, as I said before, you probably don’t need position fixed)

    Login or Signup to reply.
  3. 0 
    <div>
    <div class="navbar" style="
    height: 50px;
    background: red;
    position: fixed;
    width: 100%;
    top: 0;
    "></div>
    <div class="page" style="
    background: #18e340;
    height: calc(100vh - 50px);
    padding-top: 50px;
    "></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search