css3垂直3/3 1/3和2/3塊的劃分

我以爲我能夠使用flexbox，但我沒有找到關於此的任何信息。我嘗試使用flexbox搜索垂直佈局，但我無法成功。css3垂直3/3 1/3和2/3塊的劃分

基本上我想要的是以下情形：

我有高度的3/3，我想使用CSS分爲兩部分來劃分它（如果這是可能的offcourse），其中一部分需要1/3另有2/3

_______ 
| 1/3 | 
------- 
| 2/3 | 
|  | 
-------

我知道我可以用JavaScript做到這一點，那就是目前我在做什麼，但我認爲CSS3帶來的這種可能性還是我錯了？

來源

2014-02-07 Captain Obvious

將body和html的高度設置爲100％，然後將每個元素設置爲所需的高度。加入overflow: hidden以防止div的增長。垂直邊距會破壞這個佈局，所以使用填充。

DEMO

CSS：

body, html { 
    height: 100%; 
} 

.top { 
    height: 33.3333%; 
    overflow: hidden; 
    background: blue; 
} 

.bottom { 
    height: 66.6666%; 
    overflow: hidden; 
    background: green; 
}

來源

2014-02-07 21:44:00 brouxhaha

另一種方式來完成，這是使用position:absolute;它允許你使用比爲主體的直接子之外，本1-2/3格的地方。看到這個JSFiddle：

body{margin:0;padding:0;} 
.container{position:absolute;height: 100%;background-color:green;} 
.ot{height: 33%;background-color:red;} 
.tt{height:67%;background-color:yellow;}

例如，設置.container的height到300px看到效果。

來源

2014-02-07 21:48:12

如果你使用set高度（在px或ems中），你可以使用'position：relative'，這樣下面的任何內容都會流動。 http://jsfiddle.net/A7N4y/1/ – brouxhaha

絕對;）：D –

css3垂直3/3 1/3和2/3塊的劃分

回答

相關問題