html - 调整大小时的顶部菜单栏和填充顶部？

Question

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

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

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

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

#content {padding-top:40px;}

解决此问题的最佳方法是什么，以便调整大小的顶部菜单栏不会覆盖我的内容？

顶部菜单栏必须始终在屏幕顶部可见，所以我想我怎样才能让 padding-top 随着屏幕宽度变小而变大或其他解决方案？

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

您可以通过将宽度 100% 删除到某个固定像素宽度来解决此问题，以便顶部菜单栏不会调整大小，或者在某种程度上通过 min-width 属性。

3 回答 3