固定ヘッダーの下のDIVの位置を調整するPHP

Question

position:fixedを使用してヘッダーを作成し、ページの上部に留まるヘッダーがあります.50pxの高さから開始します。ただし、大きくても小さいロゴを追加すると、その下にDIVコンテナが重複しています。ヘッダーの高さに基づいてDIVコンテナを移動する方法はありますか。これは私が使用しているCSSです。

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

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

</style> 

これは私が使用しているHTMLです。

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

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

私はjavascriptを使用して調べましたが、私はこれがクライアント側であると理解していますので、助けにはなりません。これを回避する方法はありますか？

Answer 1

jqueryを使用してコンテナの高さを読み取ってから、これを使用してコンテナのmargin-topの値を設定できます。

このコードを試してみてください。

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