css - Vertical fluid layout -
here's layout need implement http://imm.io/16bqk
inside of wrapper element have 3 rows. top , bottom rows have height normal block elements - stretching content.
middle block should take rest of space.
if knew height of top , bottom blocks use display: table-row. have automatic if it's possible.
i'm fine bits of js i'm not sure how in elegant way taking account i'd have dynamic (middle block resizes when header/footer change height).
i don't see why can't display: table-row, you'd have set display: table on wrapper div , display: table-row on inner div's. set div in middle 100% high. ensure both top , bottom div's high content, middle div fill remaining space. behaves html table.
here's jsfiddle
.wrapper { display: table; height: 200px; width: 100%; } .header, .footer, .content { display: table-row; width: 100%; background-color: #efefef; } .content { height: 100%; background-color: #fff; }
Comments
Post a Comment