粘性頭蓋住垂直滾動條

我的粘性頭蓋住了垂直滾動條，有沒有辦法解決這個問題？粘性頭蓋住垂直滾動條

網址：http://jlwebdesigns.co.uk/

頁眉代碼（使用HTML5標籤）

header { 
    background: none repeat scroll 0 0 #283744; 
    border-bottom: 4px solid #4F5B66; 
    height: 97px; 
    margin-top: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 999; 
}

來源

2014-01-20 Lysergix

那是滾動的地圖'iframe'或實際的頁面？我沒有看到如何在網頁上重疊滾動條，但不確定它實際上是否可行。 – MackieeE

Usee css :: header {margin-right：20px; } –

這是一個實際頁面的滾動條。它發生在每個頁面上，而不管iFrame存在或不存在的地圖。 – Lysergix

解決方案不是很整齊，但給margin-top: 97px;到下面的div ....基於紅潤的小提琴：

here is a demo

來源

2014-01-20 10:45:34 NoobEditor

你沒有得到他的問題兄弟:) –

@ Mr.Alien：標題高度已越過.....在哪裏我錯了?? ：\ – NoobEditor

我只是想發表評論，因爲你們都做過。 ** Rawr！**也不確定你在回答中做了什麼。 – Ruddy

是啊，使元素有更高的zi ndex，並確保你設置了一個定位，例如相對或不相關元素。

header { 
    background: none repeat scroll 0 0 #283744; 
    border-bottom: 4px solid #4F5B66; 
    height: 97px; 
    margin-top: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 999; 
}

底層元素

#underlyingelementwithscrolls{ 
position:relative; 
z-index:1000;/*higher than 999 since header has it*/ 
}

你的情況

你已經覆蓋在屍體滾動做到這一點，它應該得到固定

body{ 
overflow:hidden;} 
html{ 
overflow-y:scroll;}

來源

2014-01-20 10:46:16 Breezer

請您在回答問題時給出原因爲什麼？ – Breezer

...保持均衡！ :) – NoobEditor

我沒有downvote，但底層元素是網頁滾動條。 – Lysergix

-1

我看了看站點和簡單修正是把：

margin-top: 97px; // if header has some padding so count that too.

將該邊距放入CSS中的section。這將修復滾動條，但會破壞徽標。由於新的餘量，你將不得不更換一些東西。

這是演示使用margin-top。您可以在標題下看到文字。把邊緣拿開，它會隱藏在標題後面。

DEMO

注意：剛剛看到有更多然後1節。你可以把它們全部包裝在一個div中並給出margin。或使用:first-of-type。

來源

2014-01-20 11:07:16 Ruddy

@ruddy ...我已經回答了那個傢伙，3分鐘前：p – NoobEditor

@NoobEditor沒有檢查過哈哈，我正在他的網站上查看。 – Ruddy

審查您的網頁後，可以改變一些事情......

您的橫幅爲100％，但它也有一個襯墊，讓您的旗幟exeed的100％。你試圖通過把溢出隱藏在html，body中來避免這種情況，但是這會讓你的頭部重疊滾動條。

解決方案：

html, body { 
width:100%; 
overflow:hidden; //remove this 
} 

#homeBanner { 
width: 100%; 
background: url(../img/bannerHolder.jpg) center no-repeat #558582; 
text-align: center; 
margin-top: 100px; 
padding: 13% 2%; 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 
}

來源

2014-01-20 11:17:41

粘性頭蓋住垂直滾動條

回答

相關問題