I was trying some core polymer elements, and I have been having trouble using core-header-panel in my demo.
I think the toolbar is right, because I managed to do another demo where it was working with minimal CSS. But all the demo I found for core-header-panel seems to take most of the layout configuration outside the component (Which kinda seems like the point of the component). Did I misinterpret something here?
The best pattern today is to use the polymer layout attributes.
<body fullbleed vertical layout>
<core-header-panel flex>
vertical layout makes the body a (vertical) flex-box, and the flex attribute on the core-header-panel will make it fill the available space. fullbleed attribute sets body to fit the viewport.
This is a better pattern in general than using fit because flex-boxes are more resilient. You could add a different header or footer to body, and the flex panel will adapt.
Also, using layout containers and flex children is a pattern you can continue to use in other places in the application.
According to the polymer web site core-header-panel is always needs to have a height set on it explicitly. http://www.polymer-project.org/docs/elements/layout-elements.html
Try using the fit attribute (http://www.polymer-project.org/docs/polymer/layout-attrs.html):
<core-header-panel fit>
....
</core-header-panel>
