3 divs horizontally, set last's height to auto - html

Question

I have 3 divs, each with width:100%, placed under each other.
Here's how it looks:
My code is:
<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>
CSS
.welcome
{
text-align: center;
width: 100%;
background-color: #3BA666;
background-image: linear-gradient(60deg, #4DAC71 50%, #3BA666 50%);
padding: 50px;
}
.welcome2
{
text-align: center;
width: 100%;
background-color: #FF61E7;
background-image: linear-gradient(60deg, #FF61E7 50%, #FF61D0 50%);
padding: 50px;
}
.welcome3
{
text-align: center;
width: 100%;
background-color: #32C8DE;
background-image: linear-gradient(60deg, #32D0DE 50%, #32C8DE 50%);
padding: 50px;
}
.why
{
/** text-align: left; **/
padding: 15px;
}
.why-icon
{
color: #0E495C;
display: block;
}
I want it to be like that - first two are normal height, and the last one always fill the empty white space. Is this possible?
Here is the Fiddle: https://jsfiddle.net/21dydo07/1/

Answer 1

Yes, with CSS3.
Give the design's parents (body, html, ...) a height of 100%. Then set some height to .welcome and .welcome2, e.g. 200px each. After that, set .welcome3 to take the rest, like this:
html, body {height: 100%}
.welcome, .welcome2 {height: 200px}
.welcome3 {height: calc(100% - 400px)}
Another solution would be to set specific height for every element (that would also be CSS2 comapatible), but that wouldn't allow you to always fill 100% of the screen height and have the third div with a variable height.
If you need the first solution, but you also need CSS2 compliance (e.g. for IE8), then you might need a javascript fallback, that will set the height to .welcome3 accordingly at pageload, something like this (needs jQuery):
$(document).ready(function() {
$(".welcome3").css("height",$(window).height()-400);
});

Answer 2

If the sentences in the first two blocks can be wrapped to single-line, use this:
You could use calc().
Make sure that the wrapper for these three has a height style.
For .welcome and .welcome2, set padding and line-height either in px or in em. For example, if the calculated height comes out to be 300px use height: calc(100% - 300px) for .welcome3. Note: The spaces around the operator - are important.

Answer 3

You can do this with Flexbox, set min-height: 100vh; on wrap div and flex: 1; on welcome3 so it will always take free space of viewport
html, body {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
}
.welcome {
background: #3CA666;
padding: 20px;
}
.welcome2 {
background: #FF61D0;
padding: 20px;
}
.welcome3 {
background: #32C9DE;
flex: 1;
padding: 20px;
}
<div class="wrap">
<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>small>
</div>
<div class="welcome3">
<h1>Welcome 3</h1>
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</small>
</div>
</div>