Tell me how to press footer to the bottom of the screen in Polymer? So that with a small amount of content "basement" always stayed down. In Polymer, everything is built with flex-blocks, but aligning the footer to the bottom doesn’t resist.

Maybe there is already some ready-made web component?

Code:

 <body class="fullbleed layout vertical"> <paper-drawer-panel> <paper-header-panel drawer> <paper-toolbar fixed></paper-toolbar> </paper-header-panel> <paper-header-panel main> <paper-toolbar fixed></paper-toolbar> <main> <section class="main-section"> <paper-material> <p>Content</p> </paper-material> </section> </main> <footer> <p>Footer</p> </footer> </paper-header-panel> </paper-drawer-panel> </body>

What it looks like:

What it looks like

    3 answers 3

    You can use the calc CSS function and calculate the minimum height of the main block:

     <style> main { min-height: calc(100% - Xpx); } footer { background: green; height: Xpx; } </style>

    In general, X if you do not have other elements, in the case of the title you will need to take it into account.

      Here is another example.

       <footer style="position:fixed;bottom:0"> Sticky footer? </footer>

      or

       <div class="fit vertical layout"> <paper-header-panel class="flex"> ... </paper-header-panel> <footer> Sticky footer? </footer> </div>

      Original answer

        Try this:

         html, body { display: table; width: 100%; height: 100%; margin: 0; } footer { display: table-row; height: 1px; }

        If you need an indentation for the footer , wrap its contents in a div and indent it.