3 divs horizontally, set last's height to auto

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

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>

Answer 2

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 3

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.