Home/ Questions/Q 8510305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T03:39:57+00:00

I want to achieve following layout using javascript/jquery and css. I have a project

  • 0

I want to achieve following layout using javascript/jquery and css. I have a project written with jquery mobile. As intended there is header, content and footer. My footer has nothing inside and floats on the bottom of the page. My content is a form which is dynamic with a next button at the bottom to submit it. On submitting I get a different form with the button. The button is always below to the right of the form.

Depending on the content inside the form the button should float below the form and align right. If the form has small content and does not cover the screen the button should drop above the footer and align right. If the content in the form is more that the screen size the button should stick below the form contents.

I tried using jquery method to get the size of the screen and over css setting to the button but this gives it a fixed attribute and does not change if I change the screen.

  var innerHeight = $('#contents').height();
  alert(innerHeight);
  var screenHeight = window.innerHeight;
  alert(screenHeight);
  if(innerHeight < screenHeight) {
    $('#contents').css("height", screenHeight-120);
  }

I want this to be dynamic so that if viewed in mobile it would render properly on landscape and portrait. Thank you for all the suggestions.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sounds like you’re looking for a sticky footer for that button: http://www.cssstickyfooter.com/

    Be sure to pad the sticky footer at least the height of that fixed position footer element you mention in your post (this would ensure your button is never hidden).

    Note: You may want to rethink your user-experience in this design.
    The position of the ‘submit/next’ button should be intuitive, and consistent.

    For example: Form #1 has that button just a couple pixels away from the input fields; Form #2 has that button 100px below the inputs. To me, that’s bad design. It’s a form — a tool that users will expect to behave a certain way. I believe ‘playing’ with the location of the submit button is a bad idea — unless it has a very specific location throughout the form submission process.

    Maybe a sticky footer combined with balancing your input count between pages would give you the best of both ‘wants’ and ‘needs’

    • 0