Resize div to fit screen

Question

When the text is added on top,the div moves down and the text on bottom is not visible. I want the divs to resize so that everything fits into container keeping the width and height to 100%.

Is there are any way to do this with CSS or do I need JavaScript?

body,html {
  margin: 0;
  padding: 0;
}

#container {
  position: absolute;
  width:100%;
  height: 100%;
  overflow: hidden;
}
        
.img {
  background: blue;
  width: 100%;
  height: 50%;
  display: inline-block;
  vertical-align: top;    
}

<div id="container">
  <p>Text 1</p>
  <div class="img"></div>
  <div class="img"></div>
  <p>Text 2</p>
</div>

Answer 1

You could use CSS flex for this.

It could look something like this:

body,html{
            margin: 0;
            padding: 0;
        }
        #container{
            position: absolute;
            width:100%;
            height: 100%;
            display:flex;
            flex-direction: column;
        }
        .img{
            background: blue;
            width: 100%;
            height: 50%;
            vertical-align: top;    
        }

<div id = 'container'>
    <p>Text 1</p>
    <div class="img"></div>
    <div class="img"></div>
    <p>Text 2</p>
</div>

Fiddle