0
我需要創建一個網頁的2行佈局,以管理求過濾器和其他部分爲具有以下特徵的結果的部分:兩排佈局僅適用於CSS
- 頁面無法溢出的高度100%
- 第一行的高度是基於他的內容(可以是可變的,並且一個javascript函數可以通過隱藏某些元素來改變它)
- 第二行的高度是100%和高度之間的差值第一排
- in t他第二排與溢出的div必須是一個帶班「名單」,我不能移動它帶有class =「結果」來div的(這將使它工作)
HTML:
<div class="main">
<div class="filter">
<div class="filtercontent">
filter content
</div>
</div>
<div class="result">
<div class="resultcontent">
<div class="list">
<div class="listcontent">
list content
</div>
</div>
</div>
</div>
</div>
CSS:
.main {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.filter {
width: 100%;
}
.result {
width: 100%;
}
.resultcontent {
height: 100%;
width: 100%;
}
.list {
height: 100%;
width: 100%;
overflow: auto;
}
.listcontent {
height: 1000px;
width: 2000px;
}
我試着用Flexbox的(以不同的方式),但我無法找到最後一個點的解決方案。
重要提示:我無法使用javascript設置行的高度。我需要一個只使用CSS的解決方案。
謝謝!
感謝您的回答。我已經嘗試設置「flex:1」,但他的孩子(身高:100%)無法檢測到他父母的真實身高 – Fabio
這是因爲這種形式的屬性聲明(帶有百分比)總是相對於其父母,始終通過根元素「級聯」。如果你將高度:100%設置爲html和body元素,並且溢出:隱藏到.main類,你應該很好去。 –