3 Divs на верхней средней и нижней части

Question

Я требую 3 дивы на верхней, средней и нижней

Я использовал JQuery, чтобы получить высоту окна просмотра и применяется процент же к соответствующему началу и только дно. Однако, когда я изменяю размер страницы, все выглядит некрасиво, так как средний div перекрывает остальные или наоборот. Мне нужно, чтобы сохранить запас среднего DIV (как показано на рис, что составляет около 10px)

Вот мой Javascript

$(document) .ready (function(){ 

function thirty_pc() { 
var height = $(window).innerHeight(); 
var thirtypc = (40 * height)/100; 
thirtypc = parseInt(thirtypc) + 'px'; 
$(".botline,.topline").css('height',thirtypc); 
} 

$(document).ready(function() { 
thirty_pc(); 
$(window).bind('resize', thirty_pc); 
}); 

}); 

Есть ли способ, то же самое можно сделать с помощью CSS или с Jquery.

Ждем вашей помощи. Спасибо.

Answer 1

DEMO

flexbox Попробуйте использовать. Это чистый CSS и все современные браузеры compatible

HTML

<div id="mainFlex"> 
    <div id="box1">❶</div> 
    <div id="box2">❷</div> 
    <div id="box3">❸</div> 
</div> 

CSS

div { 
    border: 3px solid red; 
    margin: 10px; 
} 
#mainFlex { 
    display: -webkit-box; 
    display: box; 
    -webkit-box-orient: vertical; 
    box-orient: vertical; 
    -webkit-box-pack: center; 
    box-pack: center; 
    -webkit-box-direction: normal; 
    box-direction: normal; 
    -webkit-box-align: stretch; 
    ox-align: stretch; 
    border: 1px dashed blue; 
} 
#box1 { 
    -webkit-box-ordinal-group: 1; 
    box-ordinal-group: 1; 
    -webkit-box-flex: 0; 
    box-flex: 0; 
    height: auto; 
    min-height: 100px; 
} 
#box2 { 
    -webkit-box-ordinal-group: 2; 
    box-ordinal-group: 2; 
    -webkit-box-flex: 0; 
    box-flex: 0; 
    height: 100px; 
} 
#box3 { 
    -webkit-box-ordinal-group: 3; 
    box-ordinal-group: 3; 
    -webkit-box-flex: 0; 
    box-flex: 0; 
    height: auto; 
    min-height: 100px; 
}