爲內部容器創建一個固定標題

我想創建一個固定標題欄，但問題是標題不像總是那樣是全寬度的導航欄。爲內部容器創建一個固定標題

它是中間容器的標題，我有側邊欄和容器。

所以側邊欄應該是相同的，但是當我滾動容器時容器頭應該保持在頂部。

只是想在此代碼示例：

https://plnkr.co/edit/RxSkde8M5wkNg5XoFNEF?p=preview

粉色頭「頭HERE」應該留在頂部始終。來自實施例

代碼：

<div id="wrapper"> 
    <div class="side"> 
    side content 
    </div> 
    <div class="content"> 

    <div class="header"> 
     HEADER HERE 
    </div> 

    <div class="inner"> 
     dontcare long content 
    </div> 

    </div> 
</div>

來源

2017-02-28 Tzook Bar Noy

我已經爲你修好了：https://plnkr.co/edit/CO910df64twLhEvuaWvb?p=preview;

說明

您設置在固定的位置（固定至畫面）的首部。所以你的內容的一部分將在標題下。所以在這裏，我在內容上放置了一個填充頂部（可以用邊距替換它）。填充頂部的值必須與標頭的高度相同。

.content { 
    background: blue; 
    width: 70%; 
    float: left; 
    position: relative; 
    padding-top: 2rem; 
} 

.content .header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background: pink; 
    height: 2rem; 
}

來源

2017-02-28 13:30:31 Kornflexx

快速的問題，怎麼會是頭沒抓頁面的寬度爲100％，因爲它是固定的嗎？它只需要內容全寬度....？ –

他採用父寬度的全角：父寬度不是全角。如果您希望獲取頁面的全部寬度，則需要將其直接放在主體中或全寬度的元素中。 – Kornflexx

使用這種風格在頭的div

<div style="position: fixed; width: 100%" class="header"> 
     HEADER HERE 
    </div>

來源

2017-02-28 13:28:00

。內容.header {背景：粉紅色;頂部：0;位置：固定的;寬度： 100％;}

加入以下所述。內容.header使得頭停留在頂部總是

來源

2017-02-28 13:29:26

只需添加position: fixed您.header類

.content .header { 
    background: pink; 
    position: fixed; 
    top: 0; 
}

來源

2017-02-28 13:32:15 sanket

爲內部容器創建一個固定標題

回答

相關問題