html - table-cell height is not fitting to content -
i using css tables setup basic grid page. center cell of each row contain content whereas first , third "columns" background color.
the problem having has table-cell height. here jsfiddle showing issue: http://jsfiddle.net/uqua9/
/*** essential css layout ***/ html, body { height: 100%; margin: 0pt; } .frame { display: table; width: 100%; } html>/**/body .frame { height: 100%; } .row { display: table-row; height: 1px; overflow: hidden; /* commenting out has no effect. */ } html>body .row.expand { height: auto; /* commenting out has no effect. */ } .row div { display: table-cell; }
note in headerrow, contentcolumn has large gap beneath end of text between , menurow. don't understand why table-cell padding out that. far can see, don't have padding or margin set account empty space. went css table because autofit cell height content , isn't working!
here's screen shot illustrate. grey problem. cell should end on line after text there bunch of empty grey. pink menurow should displayed right after text in headerrow.
i know missing simple or obvious. hints appreciated.
Comments
Post a Comment