3 divs горизонтально, установите высоту последнего на авто

Question

У меня есть 3 divs, каждый с width: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> 

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

Я хочу, чтобы это было так - первые две нормальные высоты, и последний всегда заполняет пустое пустое пространство. Это возможно?

Вот Fiddle: https://jsfiddle.net/21dydo07/1/

Answer 1

Да, с помощью CSS3. Дайте родителям дизайна (тело, html, ...) высоту 100%. Затем установите некоторую высоту в .welcome и .welcome2, например. 200 пикселей каждый. После этого установите .welcome3 взять остальное, как это:

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

Другим решением было бы установить определенную высоту для каждого элемента (который также был бы CSS2 comapatible), но это не позволит вам всегда заполнить 100% высоты экрана и иметь третий div с переменной высотой.

Если вам нужно первое решение, но вам также необходимо соблюдение CSS2 (например, для IE8), тогда вам может понадобиться резерв javascript, который установит высоту в .welcome3 соответственно в pageload, что-то вроде этого (требуется jQuery) :

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

Answer 2

Если предложения в первых двух блоков могут быть обернуты в одной строке, используйте: Вы можете использовать calc(). Убедитесь, что обертка для этих трех имеет стиль height. Для .welcome и .welcome2, padding и line-height либо в px, либо в em. Например, если расчетная высота составляет 300px, используйте height: calc(100% - 300px) для .welcome3. Примечание. Пространства вокруг оператора - важны.

Answer 3

Вы можете сделать это с Flexbox, установите min-height: 100vh; на wrap DIV и flex: 1; на welcome3 так всегда будет свободного пространство видового

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>