javascript - Bootstrap / Css - 2 DIV same height -

i've got html+css code. need 1st div (row-1, white colored) take first half of container height, , 2nd div (row-2, orange-colored) take second part. here html: http://pastebin.com/ipiekhbz , css: http://pastebin.com/jtxw695f

revised answer: after realising default approach did not work html, should work. have classes .content-row-1 , 2 respectively. can use tell corresponding rows use portion of height. work need manually fix positioning. (someone correct me if can done more elegantly) example classes like:

    .content-row-1 {        background: #eee;        position: absolute;        top: 10%;        display: block;        height: 40%;          width: 100%;     } 

i noticed footer takes 10% of height , and assumed did not want overlap or gaps. work should give header percentage height (10% in example keep things simple).

and future: try using https://jsfiddle.net/ when showing code samples. put @ https://jsfiddle.net/kvbyk3f1/.