调整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>

- FBR

---

将.overflow的属性值从hidden改为auto，应用于.container类。 - Deepak Sharma

容器的高度不应该增加，即使添加了新元素？ - Rahul Patel

只会有两个 .img 元素吗？ - Deepak Sharma

不，容器的高度不应该增加。它应该适合屏幕而不会溢出。 - FBR

可能会有超过两个 .img 元素。 - FBR

你能添加一张图片来说明你想要得到什么吗？ - Mike Trinh

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>

Fiddle

- Goombah

Answer 2

使用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>

- Rahul Patel

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>

- Kiran Dash

---

这将添加滚动条。容器应适合屏幕。 - FBR

那么你将不得不减小.img div的高度，否则它将无法适应。 - Kiran Dash

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

- Deepak Sharma