1

位置が固定され、テキストが含まれているトップメニューバーがあります。画面のサイズを小さくすると、画面が圧縮され、テキストに合わせて高さが高くなります。

トップメニューバーの下に、パディングトップを使用して下に移動したWebサイトコンテンツを含むdivがあります。

トップメニューバーのサイズを変更すると、記事の上部がトップメニューバーの高さの変更でカバーされます。

#topmenubar{position:fixed;width:100%;text-align:center;word-wrap:normal;}

#content {padding-top:40px;}

サイズ変更されたトップメニューバーが私のコンテンツをカバーしないようにするための最善の方法は何ですか？

トップメニューバーは常に画面の上部に表示される必要があるので、画面の幅を狭くしてパディングトップを大きくするにはどうすればよいでしょうか。

4

3 に答える 3

2

jquery

$(window).resize(function(){
  var h = $("#topmenubar").height();
  $("#content").css("padding-top",h+"px");
});
于 2012-09-04T18:51:14.603 に答える
2

純粋なJavaScriptソリューション（jQueryは必要ありません）：

window.onresize = function() {
    document.getElementById("content").style.paddingTop = document.getElementById("topmenubar").offsetHeight;
};
于 2012-09-04T18:57:40.197 に答える
0

これを回避するには、幅を100％削除して固定ピクセル幅にし、上部のメニューバーのサイズが変更されないようにするか、min-widthプロパティを使用します。

于 2012-09-04T18:52:59.870 に答える