Html 水平3个div，设置为最后一个'；自动高度

我有3个div，每个div的宽度为100%，放在彼此下面。 下面是它的外观：

我的代码是：

<div class="welcome">
   <h1>Welcome</h1>
   <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua.</small>
</div>
<div class="welcome2">
   <h1>About</h1>
   <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua.<small>
</div>
<div class="welcome3">
   <h1>Why choose us?</h1>
   <div class="row">
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
      <div class="col-md-4 why">
         <i class="fa fa-reply-all fa-3x why-icon"></i>
         <strong>Fast support</strong>
         <p>Our moderators will help you with your problem.</p>
      </div>
   </div>
</div>

我希望它是这样的-前两个是正常的高度，最后一个总是填补空白。这可能吗

这是小提琴：

是的，有CSS3。 为设计的父对象（主体、html等）提供100%的高度。然后将一些高度设置为.welcome2和.welcome2，例如每个200像素。在那之后，设置。welcome3来处理其余部分，如下所示：

html, body {height: 100%}
.welcome, .welcome2 {height: 200px}
.welcome3 {height: calc(100% - 400px)}

另一个解决方案是为每个元素设置特定的高度（这也是CSS2兼容的），但这不允许您始终填充100%的屏幕高度，并使第三个div具有可变的高度

如果您需要第一个解决方案，但也需要CSS2合规性（例如，对于IE8），那么您可能需要一个javascript回退，它将在pageload时相应地将高度设置为.welcome3，如下所示（需要jQuery）：

---

如果前两块中的句子可以换行，请使用以下命令： 你可以用。 确保这三种包装的包装具有

高度

样式。

---

对于

.welcome

和

.welcome2

，在

px

或

em

中设置

填充

和

行高

。例如，如果计算出的高度为

300px

使用

height:calc（100%-300px）

表示

。welcome3

。注意：操作员周围的空格非常重要。

您可以使用Flexbox执行此操作，设置

最小高度：100vh在
wrap
div和
flex上：1打开
welcome3
，因此它将始终占用视口的可用空间


html，正文{
保证金：0；
填充：0；
}
.包裹{
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
文本对齐：居中；
}
.欢迎{
背景：#3CA666；
填充：20px；
}
欢迎光临{
背景：#FF61D0；
填充：20px；
}
欢迎光临{
背景#32C9DE；
弹性：1；
填充：20px；
}

欢迎
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。
关于
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性劳动和重大损失。小型>
欢迎3
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
临时劳工和劳工保险
为每个div设置高度%。例如25、25、50%您想为所有3个div设置固定高度吗？我试过了，它不起作用。任何东西都不会改变。我只想要最后一个div的固定高度。
html, body {height: 100%}
.welcome, .welcome2 {height: 200px}
.welcome3 {height: calc(100% - 400px)}

$(document).ready(function() {
    $(".welcome3").css("height",$(window).height()-400);
});