残りの高さで子divを設定する

私はコンテナdivと、2つの子div（上端に1つ、下端にもう1つ）を持っています。一番上のものはあらかじめ定義された高さ20pxを持ち、一番下のものはコンテナdivのリマインダーの高さを持つ必要があるので、100%で設定しますが、コンテナdivと同じ高さをプッシュしているようです下方に移動します（コンテナの境界が隠れていることを参照してください）。明示的にその高さを指定せずに、残りの高さに下のdivを広げるようにこれを修正するには？残りの高さで子divを設定する

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div style="width:300px;height:200px;border:1px solid black"> 
 
     <div style="width:100%;height:20px;background-color:gray"> 
 
     div 1 
 
     </div> 
 
     <div style="width:100%;height:100%;background-color:orange"> 
 
     div 2 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-03-13 ps0604

あなたが利用可能なスペースを埋めるために成長したい子にcalc(100% - 20px)

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div style="width:300px;height:200px;border:1px solid black"> 
 
     <div style="width:100%;height:20px;background-color:gray"> 
 
     div 1 
 
     </div> 
 
     <div style="width:100%;height:calc(100% - 20px);background-color:orange"> 
 
     div 2 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

またはフレキシボックスflex-direction: columnとし、flex-grow: 1を使用することができます

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div style="width:300px;height:200px;border:1px solid black;display:flex;flex-direction:column;"> 
 
     <div style="width:100%;height:20px;background-color:gray"> 
 
     div 1 
 
     </div> 
 
     <div style="width:100%;flex-grow:1;background-color:orange"> 
 
     div 2 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-03-13 01:23:38

残りの高さで子divを設定する

答えて

関連する問題