2つのdivs - 1つの固定された高さ、残りのスペースを埋めるためのもう1つ

Question

2つのdiv：1つは静的な高さで、もう1つは親の残りのスペースを埋めるためです。親divは動的な高さを取得します。この例では100pxに設定していますが、200pxまたは300pxとすることができます。​​セクションが親セクションのblueに流出します。私は流出を示すために余裕を持っています。私はそれが親境界までしか塗りつぶさず、スクロールバーを必要としないようにしたい。私はこの15pxを親の境界から外す方法を確かめていません。ここで何か助けてくれてありがとう。

.container { 
 
    width: 100%; 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 

 
.child1 { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 15px; 
 
    width: 100%; 
 
    background: red; 
 
} 
 

 
.child2 { 
 
    position: absolute; 
 
    top: 15px; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin-left: 5px; 
 
    background: green; 
 
}

<div class="container"> 
 
    <div class="child1"></div> 
 
    <div class="child2"></div> 
 
</div>

Answer 1

はchild2の高さと幅を定義します次のようになります。

height: calc(100% - 15px); 
width: calc(100% - 5px); 

.container { 
 
    width: 100%; 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 

 
.child1 { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 15px; 
 
    width: 100%; 
 
    background: red; 
 
} 
 

 
.child2 { 
 
    position: absolute; 
 
    top: 15px; 
 
    height: calc(100% - 15px); 
 
    width: calc(100% - 5px); 
 
    margin-left: 5px; 
 
    background: green; 
 
}

<div class="container"> 
 
    <div class="child1"></div> 
 
    <div class="child2"></div> 
 
</div>

Answer 2

あなたはボックスが親を埋める代わりに使用して作るために、トップ/左/右/ボトム値を使用することができますwidth: 100%; height: 100%; margin-left: 5px

<div style="width: 100%; height: 100px; background: blue; position: relative;"> 
 
    <div style="position: absolute; top: 0px; height: 15px; width: 100%; background: red"></div> 
 
    <div style="position: absolute; top: 15px; bottom: 0; left: 5px; right: 0; background: green"></div> 
 
</div>

Answer 3

私は右のあなたの問題を取得しますが、ここで私の試みを行くんだ場合フレキシボックス

.p { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 150px; 
 
    border: 1px solid red; 
 
} 
 

 
.c { 
 
    height: 15px; 
 
    background-color: yellow; 
 
} 
 

 
.d { 
 
    flex-grow: 1; 
 
    background-color: green; 
 
}

<div class='p'> 
 
    <div class=c></div> 
 
    <div class=d>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error officia, perferendis sed ipsam quae illo voluptas voluptate, obcaecati pariatuLorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
</div>

Answer 4

わからないを使用してください：

<div style="width: 100%; height: 100px; background: blue; position: relative; overflow:hidden"> 
    <div style="position: absolute; top: 0px; height: 15px; width: 100%; background: red"></div> 
    <div style="position: absolute; top: 15px; height: 100%; width: 100%; margin-left: 5px;background: green"></div> 
</div> 

Answer 5

希望これは 'カルク' を使ったことがない

.container { 
 
    width: 100%; 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 

 
.child1 { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 15px; 
 
    width: 100%; 
 
    background: red; 
 
} 
 

 
.child2 { 
 
    position: static; //browser default position is static no need 
 
    top: 15px; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin-left: 5px; 
 
    background: green; 
 
}

<div class="container"> 
 
    <div class="child1"></div> 
 
    <div class="child2"></div> 
 
</div>