獲取股利與固定位置，以填補寬度

我有以下設置：獲取股利與固定位置，以填補寬度

<div id='sidebar'></div> 
<div id='header'></div> 
<div id='content'>Hello World</div> 

#sidebar { 
    float: left; 
} 
#sidebar ~ * { 
    overflow: hidden; 
}

這使得#sidebar到#header和#content推到右側，並在那之後，#header和#content佔用全屏寬度。

我想要做的是將標題固定在屏幕的頂部，這樣側邊欄會繼續將其推向右側，但是在滾動時它會保持在屏幕的頂部。

我天真的嘗試只是設置#header { position: fixed }。這不起作用;它會導致#header的寬度根據其子級自動計算。

那麼我再加#header { width: 100% }。這更接近;寬度會填滿屏幕，但不會被#sidebar推向右側。添加float: left也沒有幫助。

我的限制是：

我沒有控制權#content，不能把它說我控制
任何其他標記中，我不知道#sidebar有多寬

我可以用CSS來做到這一點，而不用計算Javascript中#sidebar的寬度和位置嗎？

https://jsfiddle.net/vkL4s5Lz/1/

來源

2016-03-02 Yosef Weiner

如果側邊欄的寬度沒有被定義...然後NO。固定位置標題將不在文檔流中，因此不受其他未定位元素的影響。 –

感謝@Paulie_D，這幫助我思考我發佈的答案 –

訣竅是包裝在一個包裝標題中，然後固定在包裝內的標頭的位置。

<div> 
    <div id='header'></div> 
</div> 

header { 
    position: fixed; 
    width: 100%; 
}

https://jsfiddle.net/vkL4s5Lz/2/

來源

2016-03-02 12:20:06

獲取股利與固定位置，以填補寬度

回答

相關問題