Geek Answers Handbook

How can I create my page so that the submit button is always at the bottom of the window?

I have a page that already has a “bottom-aligned” footer using a container with 100% height and the following css:

#footer { position: absolute; left: 0px; right: 0px; bottom: 0px; font-size: 12px; }

What I would like to do is to have buttons for my page form (indicated in the html below the div with the class "actionButtons") always directly above the footer, regardless of the other contents of the form. I can guarantee that the contents of the form will never cause an overflow.

 <html> <body> <div> <div class="wideContent"> <form> <div class="actionButtons" style="text-align:right;"> </div> </form> </div> </div> <div id="footer"></div> </body> </html>

I fumbled with height / min-height without success. What css do I need for the html above to always place the "actionButtons" div at the bottom of the window, just above the footer? Thank you in advance.

+4
source share
1 answer

Since <form> has position:relative , the only way I can think of getting the buttons below is position:fixed , for example, & hellip;

 #footer { position:absolute; left:0; right:0; bottom:0; font-size:12px; height:25px; } .actionButtons { position:fixed; bottom:25px; left:0; right:0; height:10px; }

& hellip like in this demo . But to install it, you need to set the height set to #footer , which corresponds to the bottom on .actionButtons . (I have included height in .actionButtons for demo purposes).

+2
source

More articles:


All Articles