asked on

Fixed position header of variable height and content below issue

Hi all,

I have a fixed header which doesn't scroll like the content below it.

The issue I have is that this header height may change (depending on user input) but the css of the content_wrapper below has a fixed setting of padding-top: 180px; for example.

How can I get the content below to be pushed down when the fixed header height changes?

Cheers

COBOLdinosaur

Whatever event triggers the change in header height should also be used to trigger a function that changes the padding of the content.

dolythgoe

ASKER

That's the difficulty, not sure how to check the change event of a <div> height because it's an indirect effect when the horizontal content wraps because of screen width.

Gurvinder Pal Singh

unless the content_wrapper is absolute positioned, you don't need to worry about it

COBOLdinosaur

If the screen width changes then there is a reside event so, assumming the header has an id of "header" and content has an id of "content" all you need is this script:

<script type="text/javascript">
function changeHgt()
{
   document.getElementById('content').style.top = document.getElementById('Header').offsetHeight +"px";
}
onresize=changeHgt;
</script>

Open in new window

Put that in the head; make sure both elements have an id and you should be good to go.

Cd&

ASKER CERTIFIED SOLUTION

Ovid Burke

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer