调整DIV在固定标头PHP下的位置

Question

I have a header that uses position:fixed to stay at the top of the page, it starts as 50px high, however, if a larger/smaller logo is added it's height changes meaning it can then overlap the DIV container beneath it. Is there a way to move the DIV container based on the height of the header. This is the CSS I am using;

<style>
#header {
position:fixed;
top:0px;
height:50px;
width:100%;
}

.container {
margin-top: 50px;
width: 100%;
height: 250px;
}

</style>

This is the HTML I am using, its really quite basic.

<div id="header">
  ... Menu ...
</div>

<div class="container">
  ... Content ...
</div>

I have looked into using javascript but I understand this is client side so would not help. Is there a way around this?

Answer 1

You can use jquery to read the height of the container and then use this to set the value for margin-top of container .

Try this code:

$(document).ready(function(){
  var h=$("#header").css("height");
  $(".container").css("margin-top",h);
});