调整 div 大小以适应屏幕

Question

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

有什么办法可以用 CSS 做到这一点，还是我需要 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

您可以使用 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>

小提琴