Html 停止折叠div，位置：固定

我正在twitter bootstrap中的一个站点上工作，希望我的

内容

div

放在我的

固定

标题的正下方。问题是我的标题有

位置：fixed

，它将标题从布局的流程中移除，并折叠我的div，因此它看起来没有任何高度。我不想添加

高度

，因为我的标题可能会根据其内容更改高度

这是我的密码：

---

这里有一个答案，但我不想使用

边距

或

填充

，因为我的固定页眉可能会改变高度。

有两种解决方法：

CSS方式

var headerHeight = $(".navbar-header").height();

$(".content").css("margin-top" , headerHeight);

只需制作标题的隐藏副本，并将其插入内容之前，然后使用

位置：静态

和

可见性：隐藏

JS方式

var headerHeight = $(".navbar-header").height();

$(".content").css("margin-top" , headerHeight);

动态获取页眉外部高度，并将其用于顶部边距，如下所示：

var topPadding = elem.outerHeight();
$body = $('body');
$body = $body.css('padding-top', topPadding + 'px');

这里有一个正在工作的

---

如果您的标题在媒体查询功能或其他功能中发生更改，您只需添加

$（window）.resize（function（）{[您的代码在此]}）

在调整窗口大小时调整页边距功能。

如果页眉是固定的并动态更改页眉高度，则需要计算页眉高度并将其设置为内容分区。

jQuery

var headerHeight = $(".navbar-header").height();

$(".content").css("margin-top" , headerHeight);

---

我认为最好使用.outerHeight（或.outerHeight（true））而不是height，因为边距/填充是的..这取决于html结构。主要用途是使用jQuery计算标题。感谢+1提供CSS解决方案。但这个解决方案真的是明智的，因为我的网站将有2个标题，这意味着更多的带宽？不过我还是喜欢这个解决方案：）这取决于你的标记，如果有很多元素，它会增加一些额外的带宽，但我认为它不会超过1GB，每月有一百万用户。您还可以克隆您的头文件，并使用jQuery将其粘贴到DOM中：很抱歉；但是你的导航栏并不是不断变化的，最干净的方式是边距/填充。您可以在窗口上使用jquery的resize事件执行JS实现。。。只要知道，如果你不是用面向对象的方式来创建它，你的JS只会变成更多的意大利面代码。我指的答案是@dborghez如果你想要一个JS实现，答案就是你想要的；通过一些调整，它将按照您希望的方式工作。