调整大小时，顶级菜单栏和填充顶部？

Question

我有一个顶部菜单栏，位置固定并包含一些文字。当屏幕调整得更小时，它会压缩，并且它的高度会增加以适应文本。

我在顶部菜单栏下面有一个div，其中包含我的网站内容，使用padding-top向下移动。

当顶部菜单栏调整大小时，文章顶部会被顶部菜单栏的高度更改所覆盖。

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

#content {padding-top:40px;}

最好的方法是什么，这样调整后的顶级菜单栏不会涵盖我的内容？

顶部菜单栏必须始终显示在屏幕顶部，所以我想如何在屏幕宽度变小或其他解决方案时让填充顶部变得更大？

Answer 1

jquery的

$(window).resize(function(){
  var h = $("#topmenubar").height();
  $("#content").css("padding-top",h+"px");
});

Answer 2

纯JavaScript解决方案（不需要jQuery）：

window.onresize = function() {
    document.getElementById("content").style.paddingTop = document.getElementById("topmenubar").offsetHeight;
};

Answer 3

你可以通过将宽度100％移到某个固定的像素宽度来解决这个问题，这样顶级菜单栏就不会调整大小，  或在某种程度上由最小宽度属性。