问题
I am trying to use a 'Holy Grail'-style layout with flexbox - fixed header above columns that fill the page. I am basing my code on this source.
My problem is that a child element with height:100% inside of the main cell does not pick up the height of the layout. The following demo shows what I mean, I want the red element to take up the full height (tested in Webkit):
http://jsbin.com/dafac/2/
How can I fix this?
回答1:
I've used the second solution mentioned in How to make flexbox children 100% height of their parent? using "position:absolute; bottom:0;" to create a full height child of the flex item because "height:100%" requires the flex item to have an explicit height.
来源：https://stackoverflow.com/questions/25435060/css-flexbox-layout-child-with-height-100