html - Height: 100% Not Working Even Though All Parents Have Height: 100% -
setting height: 100% <div> .ui in html below not work though parent elements have height set 100%.
could because i'm using <core-header-panel>? checked code don't see override height.
could due using layout horizontal attributes?
the layout attributes (built on top of css flexbox) , core-header-panel part of polymer.
this html (simplified):
<!doctype html> <html> <body unresolved> <core-header-panel> <div layout horizontal class="container"> <div class="ui"> </div> <!-- not take 100% of height --> <div flex class="items"> </div> <!-- has content within fills height, <div> doesn't --> and css (simplified):
html, body { height: 100%; } core-header-panel { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .container { width: 100%; height: 100%; } .ui { height: 100%; position: relative; margin: 30px; } .items { display: inline-block; height: 100%; margin: 30px; } any help appreciated.
edit 1: using devtools noticed <core-header-panel> take 100% of height, <div> .container not. height: 100%; not crossed out .container in "styles" tab in devtools.
edit 2: info on polymer here link simple explanation of polymer layout attributes , here link info on core header panel. there github links on top right of both pages.
the solution simple.
i had add together fullbleed vertical layout <core-header-panel>. fullbleed forces take entire height of parent. didn't see reason since specified height: 100%, appears not work without it.
i added fit <div> .container create fit parent.
<!doctype html> <html> <body unresolved> <core-header-panel fullbleed vertical layout> <!-- added "fullbleed vertical layout" here --> <div fit layout horizontal class="container"> <!-- added "fit" here --> <div class="ui"> </div> <div flex class="items"> </div> html css html5 css3 polymer
No comments:
Post a Comment