重疊動態固定標題

Question

我的固定標題重疊了我的內容。 就像這裏（Position fixed content overlapping problem）

，但我的頭是動態的，所以並不總是50px的高度有時52，100 ...

Answer 1

嘗試在你的盒子其放置好。

當你創建一個固定的元素，它需要一個確切位置：

例子：

#header{ 
    height: 95px; 
    width: 640px; 
    position: fixed; 
    top: 30px; 
    right: 30px; 
} 

所以，這是你的瀏覽器將如何閱讀：我將會把固定元件在屏幕的右上角：距離頂部30像素，屏幕右側30像素。

原因那些固定的元素是一個在另一個上面，那是因爲他沒有正確定義頂部/底部和左/右位置。添加更多文本，你會看到如果你可以滾動固定元素（你不能..）。

將所有內容放入div和ID'it＃bigbody。給#bigBody一個精確的寬度和高度，假設1000寬度和600高度。 現在添加這些：

#header { 
    height: 50px; 
    width: 600px; 
    position: fixed; 
    top: 30px; 
    right: 30px; 
} 

#footer { 
    background: #fff; 
    bottom: 0; 
    right: 0; 
    height: 30px; 
    width: 600px; 
    position: fixed; 
} 

最小寬度在這裏無關緊要......你使用這個只有當你設計的大網站，需要多臺設備訪問如iPhone，平板電腦等等......如果你只用打碼只是堅持基礎知識。

Answer 2

你可以通過JavaScript來做到這一點，更新標題的大小和其他小部件的邊距。有關示例（使用CoffeeScript，在Firefox和Chrome上測試）或使用jQuery的this other fiddle，請參閱my fiddle。基本上它將CSS變爲一個以上的元素。

header { height: value + "px"; } 
.contents { margin-top: anotherValue + "px"; } 

如果大小變化不是由JavaScript/CoffeeScript的做，你就必須把事件監聽器來更新.contents CSS。