3 Div的上方中部和底部

我需要在頂部，中間3名的div和底部3 Div的上方中部和底部

enter image description here

我已經使用了jQuery來獲取視野的高度和應用相同的百分比，以相應的頂部和底部divs只。然而，當我調整頁面大小時，事情看起來很難看，因爲中間的div與其他的頁面重疊，反之亦然。我需要保持中間div的保證金（如圖所示的PIC，這大約是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。

期待您的幫助。謝謝。

來源

2015-07-20 Gops

我剛剛更新我的查詢。我要求頂部和底部的div伸展高度以覆蓋視圖端口，但中間部分除外。頂部和底部也會有一些背景圖片..謝謝 – Gops

請參閱https://jsfiddle.net/zer00ne/omo5wab9/9它只是CSS沒有JS/jQ。不是很複雜，只需嘗試一次，你會發現這是一個更好的選擇。這個發生器可以幫助你開始http://css3gen.com/css3-flexbox/ – zer00ne

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

來源

2015-07-20 17:48:41 zer00ne

感謝您的快速回復。主席先生，我更新了我的查詢，我要求頂部和底部的div完全延伸。也是相同的響應。謝謝 – Gops

是的，flexbox是爲演示而設計的，請使用vw和vh單元。 http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design – zer00ne

https://jsfiddle.net/zer00ne/omo5wab9/9/這個演示展示瞭如何使用容器'＃mainFlex'上的vh和vw以及爲擴展框＃1和＃3設置爲2的'box-flex' – zer00ne

3 Div的上方中部和底部

回答

相關問題