调整div以适应屏幕

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

Using jquery you can achieve like below. Count total number of tags in container div and divide the 100% height among those element. SO all the items will be visible with overflow:hidden

Please check below snippet.

 var itemLength = $('#container *').length; $('#container *').css("height",(100/itemLength)+"%"); 

 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; } p,img,div{ padding:0; margin:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id = 'container'> <p>Text 1</p> <div class="img"></div> <div class="img"></div> <p>Text 2</p> </div> 

Answer 2

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

Answer 3

Change the height of .img to 40%. Because taking 50% height is making it consume the entire height.

  body,html{ margin: 0; padding: 0; } #container{ position: absolute; width:100%; height: 100%; overflow: hidden; background: #ccc; } .img{ background: blue; width: 100%; height: 40%; display: inline-block; vertical-align: top; } 

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

Answer 4

Css Code

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

Script

$(function(){
var containerHeight= $('#container').height();
var pfirstHeight=$('#container p').eq(0).height();
var pbottomHeight=$('#container p').eq(1).height();
var imgHeight=(containerHeight-pfirstHeight-pbottomHeight)/2;
$('.img').height(imgHeight);
});