调整div以适应屏幕

Question

当文本添加到顶部时，div向下移动，底部的文本不可见。我希望div调整大小，以便所有东西都适合容器，保持宽度和高度为100％。

有没有办法用CSS做这个或者我需要JavaScript吗？

＆＃13;

＆＃13;

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;    
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用jquery可以实现如下所示。计算容器div中的标签总数，并在这些元素中划分100％的高度。因此overflow:hidden

可以看到所有项目

请查看下面的代码段。

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

你可以使用CSS flex。

看起来像这样：

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

将.img的高度更改为40％。因为占据50％的高度会使它消耗整个高度。

        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代码

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

脚本

$(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);
});