最大高度不工作與百分比當'位置：固定'

我有一個彈出對話框中的項目列表。我正在嘗試給出項目列表相對於屏幕總高度的最大高度。最大高度不工作與百分比當'位置：固定'

經過一些擺弄樣式之後，在我看來，當彈出對話框具有最大高度時它不工作，因爲它在計算中創建了一個循環：彈出對話框的高度取決於列表上的高度項目和項目的最大高度的列表取決於彈出對話框的高度。

請參閱附件中的plunkr舉例：當＃popup-container的最大高度爲66％時，項目列表（popup-content）沒有最大高度。

http://plnkr.co/edit/esdIMjvOgJ8hRM8mSk2t?p=preview

來源

2013-12-11 Ben Laniado

我看不到任何東西在plunkr鏈接。但無論如何，是的，如果某物沒有高度（即使它有一個最小高度或最大高度），它的孩子的百分比也不會有相對高度。 –

我認爲你想通過移動你的溢出開始：auto;到你的容器，因爲那是最大高度的地方。這不會解決你的整個問題，我只注意到 – Viridis

這似乎這樣的伎倆：整個CSS頁面：

/* Styles go here */ 

* { 
    box-sizing: border-box; 
} 

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#popup-container { 
    position:fixed; 
    max-height: 66%; 
    border: 1px solid black; 
    width: 500px; 
    bottom: 0; 
    right: 0; 
    overflow: auto; 
} 

.popup-footer , .popup-header { 
    display: block; 
    background: #ccc; 
    height: 20px; 
    position: fixed; 
    width: 480px; 
} 
.popup-footer{ 
    position: fixed; 
    bottom: 0; 
}

頁腳是雖然有點哈克......我現在還無法確定如何解決這一個。我給頁眉/頁腳一個寬度，所以它沒有通過滾動條：S

來源

2013-12-11 15:33:14 Viridis

沒關係，頁腳可以'固定在底部0'，因爲容器已經在'固定和底部0'我猜。 – Viridis

最大高度不工作與百分比當'位置：固定'

回答

相關問題