Footer at bottom of screen or at bottom of page

Hi guys
I'm creating a new website which I would like to give a footer that stays on the bottom of the screen if the content only needs the screen height, but that follows the content if the content makes it a scrollable page?
So if there are for example only 3 lines of text between my header and my footer on the webpage, I would like to have the footer at the bottom of the screen instead of just below the text. If there is a lot of content which makes the page scrollable, I would like to have the footer at the bottom of the page, below the content.
Do you understand what I mean?
Thanks!
Bob

I'll show you how but I don't recommend doing this becuase it relies on hacks that don't work well in all devices. Nobody really cares if your footer is aligned at the bottom of the screen on short pages.
<!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=iso-8859-1" />
<title>Alt-Web Template :: 100% Height Layout</title>
<style type="text/css">
* 100% height layout with header, sidebar and footer
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,helvetica,sans-serif;
font-size:small;
color:#666;
#container {
z-index:1;
position:relative; /* needed for footer positioning*/
margin:50px auto; /* center, not in IE5 */
width:750px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* real browsers */
overflow:hidden;/*float containment*/
background:#FFF; /*for equal height columns, use a 2-toned background image here*/
#header {
padding:1em;
background-color:#FFFFCC;
border-bottom:6px double gray;
#sidebar {
float:left;
width:8.79em;
background-color:#FFCC00;
padding: 1em;
margin-top: 5.5%;
#content {
padding:1em 1em 5em; /* bottom padding for footer */
margin-left: 11em;
border-left: 6px double gray;
background-color: #EAEAEA;
#footer {
position:fixed;
width:725px;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
min-height: 40px;
padding:1em;
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>#header</p>
<h1>100% Page Height </h1>
</div>
<div id="sidebar">
<p>#sidebar</p>
<p>Footer remains fixed at viewport bottom, even on short pages.</p>
</div>
<div id="content">
<p>#content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et pretium arcu. Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In libero dolor, facilisis eu tristique suscipit, consectetur vel tortor. Phasellus tristique; metus ac rutrum sodales, purus diam tincidunt dui, vitae fringilla nunc magna in nisi. Fusce felis erat, elementum eu sollicitudin quis, rutrum a ante. Integer ullamcorper rutrum dolor vitae vehicula. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam quis justo quam. Nullam aliquam luctus suscipit. </p>
<p>Ut id nibh nec nisi ullamcorper vehicula. Phasellus lacus lectus, euismod sed tincidunt ac, laoreet venenatis libero! In hac habitasse platea dictumst.</p>
<p>Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et pretium arcu. Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In libero dolor, facilisis eu tristique suscipit, consectetur vel tortor. Phasellus tristique; metus ac rutrum sodales, purus diam tincidunt dui, vitae fringilla nunc magna in nisi. Fusce felis erat, elementum eu sollicitudin quis, rutrum a ante. Integer ullamcorper rutrum dolor vitae vehicula. </p>
</div>
<div id="footer">
#footer
</div>
</div>
</body>
</html>
Nancy O.

Similar Messages

Goup footer at bottom of page

We are working on a report in which we need to print a group footer at the end of each group, in addition the group footer should be at the bottom the page.
This is an invoice report for the clients, and we need to print the remittance address at the bottom of the page for each client. The problem is to anchor the "Remittance Address" portion at the bottom of the page. If there is not enough space on the first page the footer should move to bottom of next page.
Remember that the data portion may vary in length, also the header portion can vary in height. In addition there can be more than one client's per report.

In Report Builder navigate Help -> Quick Tour. This should explain how to add groups etc.

SSRS: Setting Header from Top/Footer from Bottom

Hello there guys
We're using RDLC-Files to create some word reports.
In our previous version, where we used RDL-Files on SQL 2008 R2, the Margin-Properties (Header from Top / Footer from Bottom) didn't get set at all an was always 0.
This behaviour was reported, but marked by Microsoft as 'By design'. Since I can't post a link, just google for
"Word export sets margin-top, margin-bottom to 0mm".
Interesting enought, on our new Version with RDLC, this properties are always set to 1.27cm, but ignore the Margin-Properties of the Report-Page at all.
Since we'd like to port our reports from the old RDLs to the new RDLCs, it would be the easiest way, if we could kindahow set these two properties.
But so far I didn't find a possiblity. Is there one, to tell the Word-Renderer what we'd like to set there?
Thanks in advance
Matthias Müller

Hi Matthias,
Thank you for your question.
I am trying to involve someone more familiar with this topic for a further look at this issue. Sometime delay might be expected from the job transferring. Your patience is greatly appreciated.
Thank you for your understanding and support.
Best regards,
Qiuyun Yu
Qiuyun Yu
TechNet Community Support

Footer no longer stays at bottom of page after update!

After updating to Muse 3.0, my footer no longer stays at the bottom ofthe page. The 'footer checkbox' is checked. After I discovered this, I unchecked the footer box and saved files, then went back re-checked the footer checkbox, saved the files and uploaded to the site. I saved the site as a different site name, uploaded ALL the files. Checked to makesure the manifest files, css were uploaded. Still have the same issue.

To revert to Muse 2.3, remove any installed copies of Muse (using Remove Programs on Windows or the Uninstall Adobe Muse application from Applications/Utilities/Adobe Installers on the Mac). Then install Muse 2.3 from:
http://labsdownload.adobe.com/pub/adobemuse/builds/muse_2-3_install_ma c.dmg
http://labsdownload.adobe.com/pub/adobemuse/builds/muse_2-3_install_wi n.exe
We're actively working to determine the cause of the issues and trying to fix them for our users.
Regards,
Sachin

Page wont fit screen and bar at bottom of page is central

'''bold text'''some pages wont fit on screen and bar at bottom of page is centred

Thank you, removing the corrupt localstore.rdf file was the complete solution. :o)

The type inside the footer drops down 50 px below the bottom of page in preview mode. I already tried unchecking the sticky footer in the site properties for that master page.

I need to fix this footer text on the home page. The type on the master page is centered inside a white 50px box. But in preview mode, the line of text drops 50px down below the bottom of page. I unchecked the sticky footer in the site properties and also set the line of text as footer item. The setting was the same on my second master and it comes out fine.

Hi
The "content" div is styled to have 100px height and visible overflow. So the text is overflowing the div but the footer is "unaware" / ingoring it and positions itself after "sidebar2"
Change the height of "content" to 100% and it should work.
Kind Regards,
Alex

Browser background showing at bottom of page

Hi all,
all the pages on my site (still under construction) measure 700pxW x 480pxW. The browser background is a different colour to the content, but on all pages except the home page the content goes from top to bottom, which is how I want it.
On the home page, the background is showing at the bottom of the page when the content should be going, like the other pages, from top to bottom.
Any ideas?

We can tell more about the problem if we can visit the site to examine it first hand. Otherwise, a guess would be to put an empty text box on the page and drag it down far enough so the footer is lowered to the point where the page content is below the lower edge of the screen. Or increase the page height in the Inspector/Page/Layout pane beyond the 480 size. Maybe more like 800.
OT

Print at Bottom of Page option causing extra page at end of report

I'm using the option 'Print at Bottom of Page" in Section Expert for some invoices I'm creating. For some reason it's causing me to have an extra page at the end of the report. If I unselect this option, the extra page goes away. I need to be able to have this group footer print at the bottom at the page but not have the extra at the end of the report. This is the first time I've used this option so maybe I've missed something. All other sections after the group footer I want printed are suppressed. Any ideas?

I guess I didn't have the report footer suppress, I just had it minimized in size. I suppressed it and it seems to be fine.

Problem with setting "Bottom of Page"

I'm trying to do make the bottom of the page the same as the bottom of the footer but when I try to bring the bottom of the page up to the bottom of the footer, the bottom of the page actually skips and extends down several thousand pixels and each time I try to bring the "bottom of the page" button back up, it skips back down a thousand or so pixels.
Please help ASAP as this is for a client.
Thanks,
brian

wa_top_tb-typ = 'S'.
    ecfld    = text-025.
    ecfld+13 = '/'.
    ecfld+14 = text-026.
    wa_top_tb-key = ecfld(19).
    CONDENSE wa_top_tb-key.
    CLEAR: ecfld.
    CONCATENATE
      pm_vbeln
      pm_vbpos
      INTO wa_top_tb-info
      SEPARATED BY ' / '.
SELECT SINGLE kunnr FROM vbak
               INTO y_wa_kunnr
                WHERE vbeln EQ pm_vbeln.
concatenate text-104
           y_wa_kunnr
           into y_v_concat
            separated by ':'.
concatenate wa_top_tb-info
             y_v_concat
             into wa_top_tb-info
             separated by '    '.
APPEND wa_top_tb TO top_tb.
CLEAR wa_top_tb.
clear y_v_concat.

How do I put page number at the center of the bottom of page one and the rest of the page numbers at top right corner?

How do I put page number at the center of the bottom of page one and the rest of the page numbers at top right corner?

Put a section break at the bottom of page 1
Then insert your page number in the footer of page 1.
Go to page 2 and click in the body of the text;
Inspector > Layout > Section > uncheck Use Previous Headers & Footers > click in Header on page > insert > Page Number
Peter

Cant move bottom of page bar up to reduce page size.

Hi all i am quite new to Muse although I have picked it up fairly quickly.
I have a niggling problem that on my home page I cannot move the bottom of page bar up to reduce the page size it seems to be stuck at 2629 pixels.
I have tried changing minimum height in page properties but when I press o.k it just reverts back to 2629 pixels again.
Any help would be greatly appreciated

You likely have an empty text frame or something that you can't see that is holding it down there. Start clicking around near the topp of the footer inside the page content area and see if you get any elements there that are sized to long and holding the footer down there.

Getting whitespace between bottom of page and bottom of browser.

Happens for a relatively short page (site properties of 1280x800) when browser is resized large (resolution, full screen).   The testcode is at http://susandeskotestsite.businesscatalyst.com/news.html
I have (think I have) put the bottom of browser slider at the same position as the bottom of page slider on all the master pages, that doesn' seem to get it.
Would be fine to just have it paint the same color down to bottom of browser.
Thanks

hey, that was it!    i had defined different colors as browser fill and that was what was having the dark grey from bottom of page to bottom of browser.   your previous fix on sticky footers fixed the problem where i was seeing white below the bottom of the page but only for the width defined in site properties. thanks, wish i could do more than just mark it correct.
as a follow on, the site properties are page width of 1280 and min height of 800.   generally looks good, but when you maximize a browser window at 2560 x 1600 you get a lot of browser fill and the 1280 x 800 'page'.   i've seen other websites that will stretch the 'page' to be much larger on higher resolution displays.   can this be done in muse?   would the approach be to define larger page sizes to begin with and then it will be "shrink down" to fit lower browser size/resolutions?

Printing starts at bottom of page

starts printing at bottom of page

fluttering wrote:
starts printing at bottom of page
Hi,
Does the output look good ? I can't see any problem with that, I myself have one printer which prints that way because the way the printer sucks papers in and turns it around.
Regards
BH
**Click the KUDOS thumb up on the left to say 'Thanks'**
Make it easier for other people to find solutions by marking a Reply 'Accept as Solution' if it solves your problem.

Bottom of page

hi, I am writing a document with footnotes. Sometimes there is not enough space between words at the bottom of page and the page number. Sometimes there is too much space. How do I rectify this?

How are you inserting the footnotes? Are you using the "Insert Blank Footnote" menu item to accomplish this?

Hidden text at bottom of page, how can I fix formatting?

hidden text at bottom of page, how can I fix formatting?

You don't give much information so I'm going to guess you're using a text box, perhaps in a layout document. Click on the little empty blue box on the lower right side, then click where you want the text to continue.
Walt

Have new update but when i am on trying to sync I have no scroll down bar to select option on the bottom of pages so sync is not done with all i want on it. Using my arrow keys also dont work. I have deleted itunes

Have new update but when i am on trying to sync I have no scroll down bar to select option on the bottom of pages so sync is not done with all i want on it. Using my arrow keys also dont work. I have deleted itunes and reinstall but its still the same. Any ideas?

iPod touches or any iDevices from Apple sync only to one computer. If you sync to a different computer, all your music will be replace with the music from the new computer's iTunes. If the music were purchased from iTunes, you can re-download them again otherwise the music on iPod touch will be deleted. Do you have iTunes backup?

Footer at bottom of screen or at bottom of page

Similar Messages

Maybe you are looking for