顶部中部和底部有3个分区

Question

我需要在顶部，中间和底部有3个Div。

我使用jquery来获取视口高度，并仅将相同百分比应用于相应的Top和Bottom div。然而，当我调整页面大小时，事情看起来很难看，因为中间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;
}