CSSのみを使用して残りのdiv-heightを記入してください

コンテナに2つのdiv：があります。
最初のdivは、必要なスペースを取って、自動高さを持つ必要があります。
2番目のdivはコンテナの残りの高さを持つ必要があります。CSSのみを使用して残りのdiv-heightを記入してください

私はJavascriptを使用せずにこれを行いたいと思います。

CSS専用のソリューションはありませんか？おそらくdisplay:table/display:table-cellまたはdisplay:flexを利用することによって？

非作業例

<!DOCTYPE html> 
<html> 
<head> 
<title>Stretch</title> 
<style type="text/css"> 
    html { height: 100%; } 
    body { 
     padding: 0 0; 
     margin: 0 0; 
     height: 100%; 
     background: grey; 
    } 
    #container { background: pink; } 
    #autoHeight { background: blue; } 
    #remainingHeight { background: green; } 
</style> 
</head> 

<body> 
    <div id="container"> 
     <div id="autoHeight">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</div> 

     <div id="remainingHeight">This div should fill out the rest, making the display 
      mainly green. And no, I don't mean to just have green background. It will 
      contain other things.</div> 
    </div> 
</body> 
</html>

出典

2013-06-17 ANisus

[div要素が残っている画面スペースを埋めてください]（http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screenの可能重複-スペース） –

私はdisplay:tableとdisplay:table-rowを使用して、これを達成できる（IE7以前では動作しません）。

http://cssdeck.com/labs/elars8pj

html { height: 100%; } 
body {  
    padding:0 0; 
    margin:0 0; 
    height: 100%; 
    background:grey; 
} 
#container { 
    display:table; 
    height:100%; 
    width:100%; 
    background:pink; 
} 
#autoHeight { 
    display:table-row; 
    background:blue; 
} 
#remainingHeight { 
    display:table-row; 
    height:100%; 
    background:green; 
}

出典

2013-06-17 14:17:27 ANisus

CSSのみを使用して残りのdiv-heightを記入してください

答えて

関連する問題