如何使容器佔用固定父元素內的剩餘垂直空間？

Question

我在固定的（它必須相對於視口定位）div和下面的（可滾動）列表頂部有一些內容。

我想要列表從兄弟元素的底部開始，並在固定父元素的底部結束。我可以使用top: 123px;，但頂部內容是可變高度（height:calc(100%-123px);和margin相同）。 每個位置都有一些東西讓他們不適合這項工作（例如：absolute元素不考慮兄弟姐妹）。

Fiddle（不需要邊框和邊距）

#fixed-wrapper { 
 
    border: 1px solid blue; 
 
    position: fixed; 
 
    top: 32px; 
 
    bottom: 30px; 
 
    left: 5px; 
 
    right: calc(30%-5px); 
 
} 
 
#fixed-wrapper .scrollable-list { 
 
    position: absolute; 
 
    overflow-y: scroll; 
 
    top: 50px; 
 
    bottom: 0px; 
 
    color: red; 
 
    border: 1px solid red; 
 
} 
 
.some-bar, .some-other-bar { 
 
    border: 1px solid green; 
 
    margin: 2px; 
 
    padding 2px; 
 
}

<div id="fixed-wrapper"> 
 
    <div class="some-bar">some variable length text</div> 
 
    <div class="some-other-bar">some image or text</div> 
 
    <div class="scrollable-list"> 
 
    <div class="list-item">item1</div> 
 
    <div class="list-item">item2</div> 
 
    <div class="list-item">item1</div> 
 
    <div class="list-item">item2</div> 
 
    <div class="list-item">item1</div> 
 
    <div class="list-item">item2</div> 
 
    <div class="list-item">item1</div> 
 
    </div> 
 
</div>

我怎麼能做出這樣的設計工作？或者，或者，我怎麼可能重新組織DOM（或使用其他標籤，醜陋的表也許）具有這些屬性？

編輯：該解決方案只需要在Chrome下工作。

Answer 1

您可以使用CSS3 flexbox。我添加了<div class="scrollable-wrapper">以使您可以嘗試實現的佈局。

查看代碼片段中的註釋，這很容易理解。所以flex: 1;意味着flex-grow: 1;採取所有可用的空間。

https://jsfiddle.net/komfhjdj/1/

#fixed-wrapper { 
 
    border: 1px solid blue; 
 
    position: fixed; 
 
    top: 32px; 
 
    bottom: 30px; 
 
    left: 5px; 
 
    right: calc(30%-5px); 
 
    display: flex; /*added*/ 
 
    flex-direction: column; /*added*/ 
 
} 
 
.scrollable-wrapper { 
 
    position: relative; /*added*/ 
 
    flex: 1; /*added*/ 
 
} 
 
.scrollable-list { 
 
    position: absolute; 
 
    overflow-y: scroll; 
 
    top: 0; /*updated*/ 
 
    bottom: 0; 
 
    color: red; 
 
    border: 1px solid red; 
 
} 
 
.some-bar, .some-other-bar { 
 
    border: 1px solid green; 
 
    margin: 2px; 
 
    padding 2px; 
 
}

<div id="fixed-wrapper"> 
 
    <div class="some-bar">some variable length text</div> 
 
    <div class="some-other-bar">some image or text</div> 
 
    <div class="scrollable-wrapper"> <!-- added this div --> 
 
    <div class="scrollable-list"> 
 
     <div class="list-item">item1</div> 
 
     <div class="list-item">item2</div> 
 
     <div class="list-item">item1</div> 
 
     <div class="list-item">item2</div> 
 
     <div class="list-item">item1</div> 
 
     <div class="list-item">item2</div> 
 
     <div class="list-item">item1</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您可以使用JavaScript這樣做：https://jsfiddle.net/DIRTY_SMITH/komfhjdj/3/

<div id="fixed-wrapper"> 
    <div id="varHeight" class="some-bar">some variable length text</div> 
    <div id="staticHeight" class="some-other-bar">some image or text</div> 
    <div class="scrollable-list" id="list"> 
    <div class="list-item">item1</div> 
    <div class="list-item">item2</div> 
    <div class="list-item">item1</div> 
    <div class="list-item">item2</div> 
    <div class="list-item">item1</div> 
    <div class="list-item">item2</div> 
    <div class="list-item">item1</div> 
    </div> 
</div> 
<script> 
var sHeight = document.getElementById('staticHeight').offsetHeight; 
var vHeight = document.getElementById('varHeight').offsetHeight; 
var totalHeight = sHeight + vHeight; 

totalHeight = totalHeight + 6; 

document.getElementById("list").style.top = totalHeight + "px"; 

</script>