集裝箱行高自動填充/用CSS調整

我有一個容器（包裝）與兩行容器，我給兩行的高度值作爲自動，以便它可以根據它的內容動態調整大小（而不是給出每行的具體高度，例如行頂高度46％和行底高度54％）。我試圖讓底部行容器的高度自動用CSS填充屏幕（*不用JavaScript）。請檢查下面的圖像以獲得預期的結果。請指教，謝謝。集裝箱行高自動填充/用CSS調整

Click here for preview at JSfiddle

HTML

<div id="content-wrapper"> 
    <div id="row-top"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    </div> 
    <div id="row-bottom"> 
     <iframe id="gmap"></iframe> 
    </div> 
</div>

CSS

#content-wrapper { 
    display:block; 
    height:100%; 
    overflow-y: scroll; 
    width:600px; 
    float:left; 
    background-color:yellow; 
} 

#row-top { 
    color:#fff; 
    display:block; 
    position:relative; 
    width:100%; 
    height:auto; 
    background-color:blue; 
} 

#row-bottom { 
    display:block; 
    width:100%; 
    height:auto; 
} 

iframe#gmap { 
    overflow: hidden; 
    height:100%; 
    width: 100% 
}

Click here for preview at JSfiddle

預期的結果：

Should looks like this

來源

2013-11-28 wei

~~有沒有辦法使用普通的CSS。~~

如果要使用普通CSS，則必須在容器上將display設置爲table，對於子項使用值table-row。現在，規範沒有定義如何計算（匿名）單元格的高度，但是如果將height設置爲100%，它似乎可以工作（至少在Firefox上）。

您也可以使用在CSS Flexible Box Layout Module中定義的CSS屬性來做到這一點，在某些瀏覽器的某些舊版本中，該屬性不是properly supported。

但是，使用此新佈局模塊，您只需在容器上將display設置爲flex和flex-direction至column。通過這種方式，您可以獲得類似於普通塊佈局的佈局，但爲第二行設置flex至1，則將被迫佔用剩下的所有空間。

工作小提琴：http://jsfiddle.net/Q4uC8/1/

來源

2013-11-28 02:33:43

THX爲你的建議（在Chrome和Firefox的唯一測試），真的很感謝。然而，這仍然不是我想要實現的，因爲那需要爲兩行的容器設置一個特定的高度，以便獲得該作品加上它（綠色行）不會填充剩餘的空隙屏幕底部。附：測試過firefox 25和chrome 31 – wei

您也可以將'height'設置爲'100％'，就像您的代碼一樣。那不是你想要的嗎？這裏的結果是：http://jsfiddle.net/Q4uC8/2/ –

是的，你是對的。我剛剛意識到，它不起作用的原因，因爲你沒有提到，因爲HTML，身體沒有設置爲高度：100％在jsfiddle。非常感謝。不幸的是，這不會在低於10的IE瀏覽器上工作，因爲我認爲我可以找到一種方法來實現像列一樣的實現。 – wei

集裝箱行高自動填充/用CSS調整

回答

相關問題