固定佈局上的滾動變量大小

-1

我遇到了與正在處理的頁面有關的問題。該頁面的基本思想是它是一個項目列表，你點擊一行可以進入該項目的詳細信息頁面，非常簡單。我的問題是與CSS。
固定佈局上的滾動變量大小

基本上幾乎頁面上的所有東西都是靜態的（不滾動），只是表格中的東西滾動（是的，我隱藏了滾動條）。我能夠用positin:fixed;的一點點完成這個，但現在我遇到了一個問題。

每個類別都有自己的帶有表格的頁面（類別是左側的鏈接）。一些類別需要沿頂部的額外按鈕，如第二排藍色藥丸按鈕。問題在於第二排按鈕使頂部區域變大，所以桌子必須更小。但是，由於大部分頁面是position:fixed;，滾動表的大小基於它周圍的固定區域的大小，使用`height：calc（100vh - 170px）;'但是當第二排按鈕170px不再起作用時。

所以，這裏是一個問題：有沒有一種方法來完成滾動行爲需要通過純CSS與一個可變大小的行按鈕？

我已經嘗試了幾個東西，包括flexbox，但最終我似乎無法使用calc函數設置表體的高度。

來源

2016-11-23 nurdyguy

這聽起來像你需要的是flexbox。本質上，您有一個標題部分確定內容部分的高度。具有增長/縮小參數的Flex列實現了這一點。

.container { 
 
    bottom: 0px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    left: 0px; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
} 
 
.container > .header { 
 
    background: yellow; 
 
    flex-shrink: 1; 
 
} 
 
.container > .content { 
 
    background: black; 
 
    color: white; 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    Header content<br> 
 
    This will keep expanding in height. 
 
    </div> 
 
    <div class="content"> 
 
    The height of this black content box depends on the height of the header above. 
 
    </div> 
 
</div>

來源

2016-11-23 19:26:08 user2867288

固定佈局上的滾動變量大小

回答

相關問題