DIV要素の大きさを固定して残りを自動計算したい

お世話になります
DIV要素の中で画像とフッター文字を縦に並べて表示したいのですが、
フッターエリアの大きさを固定して、
画面の大きさ合わせて画像エリアを自動計算する方法を模索しております。

フッターエリア（wrapper-common-left-footer）に
height: 100px;を指定しても画面を縦に小さくすると要素は潰れてしまいます

フッターエリアを100px確保して上部にある画像をエリアを小さくしていくにはどのようにすればよいでしょうか

HTML
1
2<div class="wrapper-common">
3 <div class="wrapper-common-container wrapper-common-left">    
4
5  <!-- 画像 -->         
6  <div class="wrapper-common-left-bg">
7  </div>
8
9  <!-- フッター 部分 -->
10  <div class="wrapper-common-left-footer">
11          <div class="footer-left">
12              <img src="img/logo1.png">
13              <img src="img/logo2.jpg">
14              <div class="footer-left-p">
15                  <p>株式会社XXXXX</p>
16                  <p>xxxxxxxxxxxxxx</p>
17                  <p>〒000-0000 xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
18              </div>
19          </div>
20  </div>
21</div>
22
23・
24・
25
26

CSS
1
2 .wrapper-common{
3  width: 100%;
4  height: 80%; 
5  margin: 0;
6  padding: 0;
7  position:fixed;
8  display: flex ;
9}
10
11.wrapper-common-container {
12  width: 50%;
13}
14
15.wrapper-common-left {
16  background-color: #000;
17}
18
19.wrapper-common-left-bg {
20  height: 85%;
21  background-image: url(img/bg.JPG);
22  background-size: contain;
23}
24
25.wrapper-common-left-footer {
26  height: 100px;
27  background-color: #ccc;
28}
29

Itta

2020/11/03 04:18

画像サイズなども記述していただけますか？

Qoo

2020/11/03 08:25

画像サイズは特にしておらず、背景で使用したいので background-size: cover; にしました。元画像は6720 × 4480のものを使っていました。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のようなことでしょうか。

css
1.wrapper-common-left-bg {
2  height: calc(100% - 100px);
3  background-image: url(img/bg.JPG);
4  background-size: contain;
5  background-repeat: no-repeat;
6  background-position: center;
7}