How not to hide element under fixed-top header with dynamic height before start scrolling

Question

I am trying to create a header with dynamic height and is fixed at the top of the page while scrolling (visible throughout scrolling). The reason for dynamic height is due to the resizing of browser, so when the text in the header is wrapped, the height of the header is increased.

Therefore, the increased height covers part of the main body before the start of scrolling. Although I already tried to add padding-top: YYpx to the main body, when the height of header changes, it covers the main body's element. Basically, I would like to have 2 continuous containers but not overlapping each other, and the 1st will sticky at the top while scrolling the 2nd container.

I would like to scroll using the whole page instead of only having the scrollbar in the 2nd container. If this is not possible, then scrolling within the 2nd container can be accepted as answer as well, provided that the contents of 2nd container will shift down according to the new height of 1st container.

I have been struggling this for few days, I tried this, but the .header-container covers part of the background which is not something I intended. I was trying to use navbar as header, but it turns out really restricting on what I can put inside, so I made a custom header instead to fix at the top.

Before (Without using CSS @media): https://jsfiddle.net/q19of4j6/1/

After (I tried to use CSS to shift the 2nd container manually): https://jsfiddle.net/q19of4j6/

Resize the above jsfiddle to see the problem.

Using @media to shift the container is not feasible for me.

What I have now:

CSS

.custom-navbar {
  padding: 0.5rem 1rem;
}
body > main {
  padding-top: 112px;
}

@media (max-width: 1153px) {
  body > main {
    padding-top: 136px;
  }
}
@media (max-width: 955px) {
  body > main {
    padding-top: 160px;
  }
}

HTML

<body>
    <header>
        <!--Fixed navbar-->
        <nav class="custom-navbar fixed-top navbar-light bg-light">
        <!-- Contents in the header that I wish to keep at the top while scrolling-->
        </nav>
    </header>
    <main role="main">
        <div class="container-fluid">
            <table class="table table-striped table-bordered dataTable" cellspacing="0"
             width="100%" role="grid">
            <!--Contents of table, and contents that will move while scrolling-->
            </table>
        </div>
    </main>
</body>

I would expect that while resizing the browser width(not yet start to scroll), the contents inside the main will shift according to the new height of header.

But now, when the header height increases, it covers part of the contents of main.

I would still expect the header to be fixed at the top of the page and contents in main can scroll using the full page scrollbar.

score 2 · Accepted Answer · answered Aug 08 '19 at 09:24

As you can see here, there's no simple way to have dynamic fixed header height. Most solutions involve setting a defined header height or JS.

IMO, the simplest solution is to use position: sticky instead of position: fixed:

https://www.codeply.com/go/ElHS24d2vT

<header class="sticky-top">
    <!--Fixed navbar-->
    <nav class="custom-navbar navbar-light bg-light">
        <div>
            whateverlalallala
        </div>
    </nav>
</header>
<main role="main">
    <div class="container-fluid">
        <table class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid"></table>
        <p style="background:red">1</p>
        <p style="background:blue">2</p>
        <p style="background:orange">3</p>
        <p style="background:green">4</p>
    </div>
</main>

I might over-complicated the problem and this works perfectly! — PzrrL, Aug 08 '19 at 09:31

How not to hide element under fixed-top header with dynamic height before start scrolling

1 Answers1