2017-02-14 82 views
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的解決方案。

謝謝!

回答

0

如果使用「flex:1」屬性聲明.result div,則它將佔用外部div(.main)中剩餘的所有空間。因此,如果.filter div佔用500個高度像素,則.result將在填充100%的空白空間中調整。如果您動態更改它隱藏或添加元素flex:1將保證所有剩餘的空間將自動填充.result。

希望它有幫助

+0

感謝您的回答。我已經嘗試設置「flex:1」,但他的孩子(身高:100%)無法檢測到他父母的真實身高 – Fabio

+0

這是因爲這種形式的屬性聲明(帶有百分比)總是相對於其父母,始終通過根元素「級聯」。如果你將高度:100%設置爲html和body元素,並且溢出:隱藏到.main類,你應該很好去。 –