停止合併位置固定的div：固定

我正在twitter引導中創建一個網站，並且希望我的contentdiv位於我的fixed標題正下方。問題是我的頭文件有position:fixed，它將它從佈局流中取出，並摺疊我的div，使其看起來沒有任何高度。我不想添加height，因爲我的標題可能會根據其內容更改高度。停止合併位置固定的div：固定

這裏是我的代碼：http://jsfiddle.net/7nSss/1/

有一個答案在這裏How to position a html element under a fixed div但我不希望使用margin或padding作爲我的固定頭可能會改變高度。

來源

2014-04-15 Scott

遺憾地說;但它不像你的導航欄會不斷變化，最簡潔的方式是邊距/填充。你可以通過在窗口上使用jquery的resize事件來實現JS實現......只要知道如果你沒有創建這種OO方式，你的JS就會變成更多的意大利麪條代碼。我所說的答案是@dborghez答案就是你想要的JS實現;一些調整，它會工作如何你想要它的工作。 – Seed

有2種方法來解決：

CSS方式

只是讓你頭的一個隱藏的副本和內容之前插入，並使用position: static與visibility: hidden就可以了。

JS方式

動態獲取你的頭外的高度，並用它的上邊距，像這樣：

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

來源

2014-04-15 12:18:47 CyberAP

謝謝，CSS解決方案+1。但是，這個解決方案確實是可取的，因爲我的網站將有2個頭，這意味着更多的帶寬？喜歡該解決方案雖然:) – Scott

取決於您的標記，如果它是很多元素，它會增加一些額外的帶寬，但我認爲它不會超過1GB，每月1M用戶。你也可以克隆你的頭文件，並將它粘貼到帶有jQuery的DOM中：http://api.jquery.com/clone/ – CyberAP

在這裏有一個工作jsFiddle

var heightfixed = $(".navbar-header").outerHeight(); 
$(".content").css("margin-top", heightfixed);

如果您的標題在媒體查詢或其他功能中發生變化，您可以簡單地添加$(window).resize(function() { [your code here] });在窗口大小調整中調整邊緣功能。

來源

2014-04-15 12:20:15

如果您的標頭已修復並動態更改標頭高度，則需要計算標頭高度並將其設置爲內容div。

DEMO

jQuery的

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

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

來源

2014-04-15 12:21:45 Santy

我認爲使用.outerHeight（或.outerHeight（true））代替高度會更好，因爲保證金/填充 –

是的..這取決於你的html結構。用jQuery來計算標題是主要目的。 – Santy

停止合併位置固定的div：固定

回答

相關問題