?
Solved

How to keep a HTML div element stick to the bottom of the web page?

Posted on 2009-12-28
5
Medium Priority
?
1,291 Views
Last Modified: 2012-06-21
Hi,

I want to include a div element on my aspx .NET web page that remains always at the bottom of the page irrespective of the size of the contents. If the contents are larger than the viewable portion of the browser, then the bottom bar should be visible only when user scrolls the page to the bottom. If the contents are shorter than the view port, then the bottom bar should still stick to the bottom of the page (It should not hang around from the content above).

I tried several techniques that are suggested all around the internet, the following being the most popular one:

CSS:
.bottomBar
{
    height: 20px;
    margin-top: -20px;
    clear:both;
}

HTML, BODY
{
  height: 100%;
}

#WRAPPER
{
  min-height: 100%;
}


HTML:
MASTER page:

<html>
<head>
....
....
</head>
<body>
  <form>
    <div id="wrapper">
       <!-- Page contents -->
    </div>
    <div id="bottombar" CssClass="bottomBar">
    </div>
  </form>
</body>
</html>

The bottom bar is being displayed correctly at the bottom of the page, if there is enough content on the page to fill the view port. The min-height attribute is supposed to take care of the case where the contents do not occupy the whole view port. But somehow it is not working. I've tried different combinations of the same technique, but in vain. I'd really appreciate if somebody could point out what is wrong with this code.

NOTE: Please note the above code is not working in Firefox also. I am aware of the IE6 hack to make this work, but that is to be taken care of after getting the basics right.

Thanks,
venustus.
0
Comment
Question by:venkat_pedapati
  • 3
5 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 26132391
Try adding the code below to your class .bottom bar. You may also wish to call it an id rather than a class.
 

position:absolute;
bottom: 0px;

Open in new window

0
 

Author Comment

by:venkat_pedapati
ID: 26132985
I tried this too. For this to work, the bottombar div should be wrapped inside another div that is positioned absolutely. It cannot directly come under body/form tag. If there is no absolutely positioned wrapper div, the bottom bar would move along with the page if there is a scroll bar instead of staying fixed to the bottom.

Is there no way to achieve this without having to wrap the bottom bar div with another div element? I mean, I would like to have it directly under body.

The reason behind this is, my existing code is highly untidy and seems to contain several unmatched/extra div that are making it extremely difficult to insert the bottom bar consistently inside same wrapper in all pages. If you have some pointers that helps me clean up this code, it'd be great. But I'd still prefer the other way if one exists.

0
 
LVL 30

Expert Comment

by:LZ1
ID: 26133167
On a regular HTML page, this is what I came up with.  
Is this not correct?

<!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" />
<title>Untitled Document</title>
<style>
#bottomBar
 {
	height: 20px;
	margin-top: -20px;
	clear:both;
	color: #F00;
}

HTML, BODY
{
  height: 100%;
}

#WRAPPER
{
  min-height: 100%;
}
</style>

</head>

<body>
  <form>
    <div id="wrapper">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
       <!-- Page contents -->
    </div>
    <div id="bottomBar" CssClass="bottomBar">
    bottomBar class
    </div>
  </form>
</body>
</html>

Open in new window

0
 
LVL 3

Accepted Solution

by:
MageWind earned 2000 total points
ID: 26133614
I like LZ1's first solution, but you need to make sure you put the #bottomBar div outside of the form tag.

I thought about it a little more, and I think you may need to have a little javascript also.  Just to make sure, you want the bottomBar to stick to the bottom of the screen if there is not enough content to fill the entire screen, and if there is enough content to fill the entire screen, you want the bottom bar to be located at the bottom of the content.

The attached code accomplishes this, but I don't know how compatable it is.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
  <style>
  div#bottomBar
  {
  position:fixed;
  bottom:0px;
  height:20px;
  }
  </style>
  <script type="text/javascript">
  function fixBottomBar()
  {
    var bottombar = document.getElementById("bottomBar")
    if (bottombar.offsetTop < document.body.offsetHeight)
      bottombar.style.position = "static"
  }
  </script>
</head>
<body onload="fixBottomBar()">
  <form>
    <p>Here is the form</p>
  </form>
  <div id="bottomBar">
    Here is where the bottom bar's content will go.
  </div>
</body>

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
ID: 26133736
The java would definitely help, although it's not 100% necessary.  MageWind is correct about the Form tag though.  I kept it as proof of concept.  However, you may notice too that your ID's vs. your CSS were not entirely correct.  They are case-sensitive.  IE) a is not the same as A
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

862 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