I tried using the following to position a div tag at the bottom of the screen in the browser:
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
background-color: #0000FF;
}
<div id="footer">
Hello World
</div>
In firefox it showed a nice blue banner across the very bottom of the browser just like I wanted it to. However it IE it shows a nice blue banner across the top of the screen, which is not what I wanted.
What I want to have is a footer at the bottom of the screen regardless of the size of window that is staticly in place regardless of any scrolling that is done. Is there a way to position this div at the bottom of the window in IE using CSS?style="position:absolute;bottom:0;"That will display the content of the div tag at the bottom of the screen, but what if the other content on your page exceeds the length of 1 screen and you have to scroll? Then the div tag will keeps its positioning, cover up part of the other content, and the rest of the content will be displayed below the div tag when you scroll down. This is the problem I was trying to resolve by using the fixed positioning type.
Thank you for the input though, it does give me some ideas of other ways I could layout the page if I don't find anything else to solve my problem. Anyone else?
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
background-color: #0000FF;
}
<div id="footer">
Hello World
</div>
In firefox it showed a nice blue banner across the very bottom of the browser just like I wanted it to. However it IE it shows a nice blue banner across the top of the screen, which is not what I wanted.
What I want to have is a footer at the bottom of the screen regardless of the size of window that is staticly in place regardless of any scrolling that is done. Is there a way to position this div at the bottom of the window in IE using CSS?style="position:absolute;bottom:0;"That will display the content of the div tag at the bottom of the screen, but what if the other content on your page exceeds the length of 1 screen and you have to scroll? Then the div tag will keeps its positioning, cover up part of the other content, and the rest of the content will be displayed below the div tag when you scroll down. This is the problem I was trying to resolve by using the fixed positioning type.
Thank you for the input though, it does give me some ideas of other ways I could layout the page if I don't find anything else to solve my problem. Anyone else?