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

Question

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

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

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

#topmenubar{position:fixed;width:100%;text-align:center;word-wrap:normal;}
#content {padding-top:40px;}

为了使调整大小的顶部菜单栏不会覆盖我的内容，最好的方法是什么？

顶部菜单栏必须始终在屏幕顶部可见，所以我想我如何使填充顶部随着屏幕宽度的变小而变大，或者其他解决方案？

Answer 1

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

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

Answer 2

jquery

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

Answer 3

您可以通过将宽度100%删除为某个固定像素宽度来解决此问题，这样顶部菜单栏就不会调整大小，或者在某种程度上通过最小宽度特性。