Home/ Questions/Q 8179621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T00:02:35+00:00

following situation: <body> <div style=position:fixed; width:100%>[place holder for header]</div> <div style=position:relative;width:100%;margin-top:100px>[content]</div> </body> I need

  • 0

following situation:

<body>
 <div style="position:fixed; width:100%">[place holder for header]</div>
 <div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>

I need the header always visible and at the top, so this one should be with position:fixed.
A problem occurs after self adjustments of the header – height. If the header is higher than 100px a part of the content is hidden.

How can I (CSS) dynamically set the start position of the content div regarding the end of the header.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m still looking for a CSS only solution, but for the moment here’s an idea using just one line of JavaScript – when using jQuery:

    JavaScript

    $(document).ready(function () {
    $('#content').css('marginTop', $('#header').outerHeight(true) );
});

    HTML

    <body>
    <div id="header" style="[…]">[place holder for header]</div>
    <div id="content" style="[…]">[content]</div>
</body>

    The advantage of using .outerHeight(true) is, that it takes care of borders and margins you may have applied to your header.

    • 0