我構建的UI需要位於視口底部的固定位置/粘性元素，其寬度受主內容區域的約束。主要內容區域可選地由（同級）左側和/或右側邊欄固定寬度，所以我使用Flexbox在主要內容上構建了flex-grow: 1三列結構。固定位置元素繼承柔性項目的寬度

我從@Marc Audet的接受的答案在How can I make a fixed positioned div inherit width of parent?瞭解到，固定元件上設置width: inherit通常是如何解決這個問題，但似乎只當有其父，其未在指定寬度工作幫助我考慮我需要主要內容區域來填充頁面的剩餘寬度。

有沒有人有任何想法解決這個問題？查看我的Fiddle的代碼/示例。任何幫助，將不勝感激！

來源

2015-12-17 jabram

不會計算寬度爲你工作嗎？ 'width：calc（100vw - 150px - 250px）;' –

@AntonYakushev重點在於如果側邊欄被省略，中間部分會自動增長，否則他可以使用'left：150px'和'right：250px'來代替。 –

@jabram原因'寬度：繼承'不起作用的是'寬度'的默認值是'auto'，它被遺傳得很好，在這種情況下它只是沒有幫助你。我知道你的問題可能的解決方案，但他們是非常複雜的涉及多個兄弟選擇器... –

CSS

html { 
    box-sizing: border-box; 
    font: 400 16px/1.45 'Source Code Pro'; 
} 

*, 
*:before, 
*:after { 
    box-sizing: inherit; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: none; 
    overflow-x: hidden; 
} 

body { 
    background: #121; 
    color: #FEF; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    width: 100vw; 
    height: 100vh; 
} 

.container { 
    display: flex; 
    color: #fff; 
    height: -moz-fit-content; 
    height: -webkit-fit-content; 
    height: fit-content; 
    background: blue; 
} 

.left { 
    background: blue; 
    min-height: 100vh; 
    min-width: 150px; 
    flex-shrink: 0; 
} 

.middle { 
    background: green; 
    min-height: 100vh; 
    overflow: hidden; 
    width: calc(100vw - 400px); 
    padding-bottom: 60px; 
    flex-grow: 1; 
    flex-shrink: 0; 
} 

.middle .fixed-footer { 
    background: orange; 
    position: fixed; 
    bottom: 0; 
    width: 100vw; 
    width: inherit; 
    padding: 16px 0; 
    overflow-x: hidden; 
} 

.right { 
    background: blue; 
    min-height: 100vh; 
    min-width: 250px; 
    flex-shrink: 0; 
} 

@media screen and (min-width: 640px) { 
    html { 
    margin-left: calc(100vw - 100%); 
    margin-right: 0; 
    overflow-y: auto; 
    } 
}

新增星球大戰存有內容展示.middle的縱向柔韌性，以及如何.fixed-footer是固定的，是.middle的寬度。

DEMO

來源

2015-12-18 08:53:56 zer00ne

有趣的解決方案，謝謝！我會稍微討論一下，但是對我來說一個負面的問題就是溢出問題：scroll會始終在PC上顯示一個滾動條，我試圖擺脫這種情況。 – jabram

如果它沒有滾動條，您將如何訪問延伸到固定頁腳下方的內容？如果使用'auto'，它會跳過滾動條的寬度，從而產生難看的偏移。 – zer00ne

我只想滾動頁面而不是元素本身。如果左側和右側側欄也有很多內容，那麼我們將處理三個獨立滾動列。 – jabram

固定位置元素繼承柔性項目的寬度

回答

CSS

相關問題