Solved

How to make div footer bar stays at the bottom of screen

Posted on 2010-09-20
7
1,266 Views
Last Modified: 2012-05-10
we're making a simple iphone app where the whole app is actually a website packaged into an iphone app. We have is that we created a footer bar using div that suppose to stay at the bottom of the screen, when the page is scrolled up and down. Prob is the footer bar tends to follow the motion of the scrolling.

How do we force the footer bar to stay at the bottom? screenshot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name = "viewport" content = "initial-scale = 1.0; width=device-width" />

<title>Scherziaparte - Invia il tuo video</title>

<link href="menuLink.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div style="z-Index:1000;position:fixed;width:300;height:80px;text-align:center; top:0%;">

<?php require_once "headerIphone.php"; ?>

<?php require_once "menuLink.php"; ?>

</div>

<table width="300" height="83" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td></td>

  </tr>

</table>

<table width="300" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td>

      <table width="300" border="0" align="center" cellpadding="0" cellspacing="0">

        <tr>

          

        </tr>

      </table>

      

      <table width="300" height="300" border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td valign=top>

          <!-- Scroll bar-->

          <!--<div id=ajaxLink class="tab_container" style="position:absolute; width:300px; height:300px; background-color:#ffffff; overflow:auto;">

          -->

          <div id=ajaxLink class="tab_container" >

          <table width="300" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td></td>

  </tr>

</table>                              

            <?php require_once "video.php"; ?>



            

                                  </div>     

          </td>

        </tr>

      </table>

      <div style="z-Index:1000;position:fixed;width:300;height:480;text-align:center; bottom:0%; padding-left:1px">

      <?php require_once "advertisment.php"; ?>

      <?php require_once "footer.php"; ?>

      </div>

</td>

  </tr>

</table>

<p>&nbsp;</p>

</body>

</html>

Open in new window

0
Comment
Question by:melwong
7 Comments
 

Expert Comment

by:17Red23
ID: 33722182
You need to create set the body height to 100% with a bottom margin the size of the footer (eg -200px).

Try a layout something like this:

HTML file:

<head>
      <link type="text/css" rel="stylesheet" href="new.css">
      <!—[if lt IE 7]>
            <link rel="stylesheet" type="text/css" href="ie6.css" />
      <![endif]—>
</head>
<body>
<div id="container">
    <div id="header">Header</div>
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
      </ul>
      </div>
<div id="content">Content Here.</div>
  <div class="clearfooter"></div>
</div><!—End Container—>
<div id="footer">Footer Here.</div>


CSS (new.css):

html, body {
height: 100%;
}
#container {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#footer {
height: 200px;
position: relative;
}
.clearfooter {
height: 200px;
clear: both;
}
#container {
height: 100%;
}

0
 
LVL 6

Assisted Solution

by:Joshua_Peters
Joshua_Peters earned 50 total points
ID: 33722185
css would be
#footer {position: relative;
      margin-top: -150px; /* negative value of footer height */
      height: 150px;
      clear:both;}
0
 
LVL 3

Expert Comment

by:LouSch7
ID: 33722194
See the attached document.  I have not done much programming for the iPhone but from what I understand basic HTML and CSS rules should apply (at least the ones that Safari would normally adhere to).

I also tested this by viewing it on my iphone; you can test for the time being here (http://sscharlau.com/test.php) and it worked fine.  You'll have to use two fingers in order to slide the content however (information about that can be found here: http://darklaunch.com/2009/05/11/iphone-css-overflow-overflow-x-overflow-y-support)

Ultimately I believe what you may have been missing was an overflow tag as without it, the div doesn't know when to stop expanding.

let me know
test.php
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Expert Comment

by:acashok
ID: 33722623
0
 

Author Comment

by:melwong
ID: 33750844
We tried all the above prior to posting this question and all didn't work. The prob is the footer stayed when the page is viewed in browser like FF, IE, Safari, but not in IPhone.
0
 
LVL 3

Accepted Solution

by:
LouSch7 earned 50 total points
ID: 33756952
0
 

Author Closing Comment

by:melwong
ID: 33873147
Prob solved.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Short answer to this question: there is no effective WiFi manager in iOS devices as seen in Windows WiFi or Macbook OSx WiFi management, but this article will try and provide some amicable solutions to better suite your needs.
You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now