Geek Answers Handbook

Header bar and sticky footer

I am trying to replicate a static footer as shown here in the polymer header-header panel.

So far, I have a title bar consisting of a footer and a main content area with the “fit” attribute, so it stretches to the height of the viewport.

<body fullbleed layout vertical> <core-header-panel flex style="background-color: red;"> <core-toolbar id="mainheader"> Header </core-toolbar> <div fit layout vertical> <div flex style="background-color: yellow;"> ... </div> <footer style="background-color: green;"> FOOTER </footer> </div> </core-header-panel> </body>

However, I have two problems:

  • The footer is always displayed, the title bar only scrolls to the "yellow" div in the main content area.
  • When I minimize the window, the footer overlays a “yellow” div in the main content area (shown below).

enter image description here

How can I solve these problems?

Update

Other uses for the polymer team have been proposed that come close to the solution: Erik solution , Robs solution , but none of them solves problem 1, in the code the footer is outside the header bar and therefore is always displayed even if the container is larger than the footer than the viewport.

Moving the footer to the main content area of ​​the title bar and bending the content above it does not work either.

http://jsbin.com/vopahu/1/edit?html,output

+2
source share
1 answer

You can use the calc calc function to calculate the minimum height for your content if you want to set a fixed height on the footer.

 <style> core-header-panel { background: red; } #content { background: yellow; min-height: calc(100% - 32px /*core-toolbar*/ - 32px /*footer*/); } footer { background: green; height: 32px; } </style> <core-header-panel> <core-toolbar> Header </core-toolbar> <div id='content'> ... </div> <footer> FOOTER </footer> </core-header-panel>

http://jsbin.com/boyiwumigo/1/edit

0
source

More articles:


All Articles