css3 vertical division of 3/3 in 1/3 and 2/3 blocks [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

I thought i was was able to use flexbox this but i don't find any information on this. I tried searching for vertical layouts using flexbox but i wasn't able to succeed.

Basically what i want is the following scenario:

I have 3/3 of height and i want to divide it using css (if this is possible offcourse) in 2 parts, one part takes 1/3 and another 2/3

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

I know i can do this with javascript, and that is what i'm currently doing, but i thought css3 brought this possibility or am i wrong?

Answer 1

Set the height of the body and html to 100%, then set each element to the height you want. Add in overflow: hidden to prevent growing of the divs. Vertical margins will ruin this layout, so use padding.

DEMO

CSS:

body, html {
    height: 100%;
}

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

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

Answer 2

Another way to accomplish this is using position:absolute; which allows you to use this 1-2/3 div somewhere other than as a direct child of body. See this 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;}

For example, set the height of .container to 300px to see the effect.