Whats up people

So i have been trying to figure out how can i make the background be the size as the content. I am using a canvas as a background.

Since i am making a j-query mobile, the content is not alot and the background goes below the footer and it looks a lot weird.

Please suggest how can i fix it. Blow is the screen shot
Thank you
926a82d7e14f017a1eb399145032f98f

Recommended Answers

Have you considered pushing the footer down, aka "sticky footer"? The background is going to fill the display so I think the best approach is to have the footer move to the bottom.

Here is a link to an online example:

Jump to Post

All 3 Replies

Have you considered pushing the footer down, aka "sticky footer"? The background is going to fill the display so I think the best approach is to have the footer move to the bottom.

Here is a link to an online example: Pushing a Footer to the Bottom of a Web Page

Do you want to put the footer at the extrem bottom ?
if yse:
change:
<body> => <body style="position:relative;">
<footer> => <footer style="position:absolute;bottom:0px;"> (maybe you are using DIV for the footer, if so do the same but footer become div)

Thanks for replying, I tried using your suggestions but it did not work with j-query mobile although it works with the normal html website. Since i code HTML pages, your suggestion will help alot. It is pretty neat.

After searching for "Sticky footer for mobile j-query", i found the solution. I lost the link but following is the code:

<style type="text/css"
    [data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%; height:auto;}
</style>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.