By Caveatrob


2009-03-13 17:59:22 8 Comments

I had the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer that I can't make sit at the bottom of the page.

I want the footer to

  • stick to the window bottom when the page is short and the screen is not filled, and
  • stay at the document end and move down as normal when there is more than a screenful of content (instead of overlapping the content).

The CSS is inherited and befuddles me; I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.

22 comments

@Tamás Pap 2013-11-01 09:02:56

A very simple approach which works great cross browser is this:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

@Hiro 2018-03-09 17:07:26

simple you say?

@vsync 2013-12-03 13:50:28

I've developed quite an easy method to stick the Footer at the bottom, but as most common methods, you will need to tweak it to fit your Footer's height.

VIEW DEMO


Flexbox method:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>


This method below uses a "trick" by placing an ::after pseudo-element on the body, and set it to have the exact height of the footer, so it will occupy the exact same space the footer does, so when the footer is absolute positioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)

position:absolute method: (doesn't allow dynamic footer height)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>


Table-layout method:

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

@Steve Waring 2017-06-27 21:22:01

Simple and elegant and more importantly it works. Other solutions fail when you start adding divs with display: table display: table-row display:table-cell. However I found I needed to add body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;} to avoid a scroll bar. You could cater for this by adjusting the body:after height but I am specifying mine in rem not px so it becomes problematical.

@vsync 2017-06-27 22:20:14

@SteveWaring - Thank you. Updated this answer since it was quite old. Now I'm in favor of using flexbox

@sleske 2018-07-12 13:57:38

The CSS under "basic common markup" had a small error which caused it to not work (the error was not present in the linked "DEMO", which is ok). I took the liberty of fixing it.

@Andrew Koster 2018-12-07 01:04:35

THANK YOU! The flexbox solution is actually simple and uses no hacks or weird fixed sizes or fixed positions.

@Alisson 2019-04-11 12:58:54

Seems like the dynamic solutions don't work well when body has scrollbar. When you scroll, the footer floats instead of being kept at bottom.

@Drakinite 2019-10-03 19:38:50

This demo is the only one that works! Fantastic, thank you!

@Kronephon 2019-10-06 16:18:53

Finally. So many wrong answers everywhere. Thank you.

@mwallisch 2019-11-13 20:19:05

Used the flexbox solution but on long pages the body did not grow with the content, so I changed body: { height: 100% } to body: { min-height: 100% }.

@Jon Winstanley 2009-03-27 10:53:47

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

@Costa 2014-06-23 16:31:31

This only works if you know the height of your footer ahead of time. Sometimes footers have dynamic content, or your building a framework. Any ideas for variable height footers?

@Jose Rui Santos 2014-08-09 18:44:08

@Costa check my answer here, for a solution that works with variable height footers.

@m47730 2015-09-23 07:58:19

for dynamic content just omit the "height" and the footer will adapt to content. Not tested in all browser

@konsolebox 2016-06-08 14:30:00

This may require box-sizing: border-box; to the body [and the #container].

@Andrew Koster 2018-12-07 01:03:50

This seems like a lot of weird tricks, there are answers below which are simple and use no tricks.

@Bijay Yadav 2019-07-24 10:53:00

Thanks. Clear: both did work for me.

@m.spyratos 2017-08-18 18:16:09

A very simple flex solution that do not assume fixed heights or changing position of elements.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Browser Support

All major browsers, except IE11 and below.

Make sure to use Autoprefixer for appropriate prefixes.

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}
<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

@rashedcs 2018-10-12 03:04:54

Just customize the footer section

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>

@fWd82 2019-04-17 11:55:35

Not working. It always stick to bottom even if we have very big page. It cannot scroll with all page but just stick to bottom.

@indolentdeveloper 2019-05-05 19:30:42

Doesn't work. Footer is coming on top of content.

@Camo 2018-12-14 20:32:18

I just answered as similar question in here:

Position footer at bottom of page having fixed header

I'm pretty new at web development, and I know this has been answered already, but this is the easiest way I found to solve it and I think is somehow different. I wanted something flexible because the footer of my web app has a dynamic height, I ended up using FlexBox and a spacer.

  1. Start by setting the height for your html and body
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

I'm assuming a column behavior for our app, in the case you need to add a header, hero or any content vertically aligned.

  1. Create the spacer class
.spacer {
    flex: 1; 
}
  1. So later on your HTML could be something like
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

You can play with it here https://codepen.io/anon/pen/xmGZQL

@Karthikaeyan 2018-10-20 05:34:33

footer {
  margin-top:calc(5% + 60px);
}

This works fine

@Paolo Bergantino 2009-03-13 18:00:15

This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.

css:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

html:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Source for this code

@Caveatrob 2009-03-13 18:27:40

Tried that - it doesn't work with my particular CSS.

@Liam - Reinstate Monica 2013-07-23 09:32:23

This answer needs some detail other than the links, could you elaborate?

@VirtualWolf 2017-10-30 22:48:42

That second link is broken.

@Vasudevan Kannan 2017-12-15 10:59:49

Please elaborate your answer and paste the code if available as the link is broken

@Nemus 2016-08-01 15:24:39

This is how i solved the same issue

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

@waploaj 2018-01-16 14:46:04

You can do this

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

@Santosh Khalse 2016-12-19 13:09:24

I have used in my many projects and never got any single issue :)

for your reference, Code are in snippet

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

@I haz kode 2017-09-06 06:58:54

Dynamic one liner using jQuery

All CSS methods I have come across are too rigid. Also, setting the footer to fixed is not an option if that's not part of the design.


Tested on:

  • Chrome: 60
  • FF: 54
  • IE: 11

Assuming this layout:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

Use the following jQuery function:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

What that does is set the min-height for #content to the window height - the height of the footer what ever that might be at the time.

Since we used min-height, if #content height exceeds the window height, the function degrades gracefully and does not any effect anything since it's not needed.

See it in action:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Same snippet on JsFiddle


Bonus:

We can take this further and make this function adapt to dynamic viewer height resizing like so:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

@Aarth Tandel 2017-09-01 05:17:27

Do this

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

You can also read about flex it is supported by all modern browsers

Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Do keep in mind it is not supported by older versions of IE.

@N. Larrieux 2016-03-22 16:41:40

I've used this to stick my footer to the bottom and it worked for me:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

That's the only modification you have to do in the HTML, add that div with the "allButFooter" class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

The "allButFooter" class has a min-height value that depends on the viewport's height (100vh means 100% of the viewport height) and the footer's height, that I already knew was 40px.

That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.

Working with responsive design

Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

This is probably because Twitter-Bootstrap comes with its own margins and paddings, so that's why I had to adjust that value.

I hope this is of some use for you guys! At least, it's a simple solution to try, and it doesn't involve making big changes to the whole document.

@Steve Waring 2017-07-01 18:58:06

I have hit problems with all sorts of solutions to this problem. This solution works with my page that varies what is displayed in the body using display: none Thanks. It's nice and simple too.

@suraz negi 2017-12-31 14:02:13

i applied all solutions this one worked the best!

@Hmerman6006 2019-11-24 14:21:58

after many hours of trying solutions only two worked nl. position: fixed; bottom: 0 and this one. This solution is the best because the footer does not stick to the bottom, but stays at the end of the scrollable page.

@Hmerman6006 2019-11-24 14:51:57

to build on your answer, you can look at it another way by setting the .footer {max-height: calc(100vh+40px); position: absolute}. As it also works, you should just know your body size.

@Olatunde G. 2014-07-15 13:07:10

Just set the html, body, and the other rows except the footer to 100%. e.g

<body>
<header></header>
<content></content>
<footer></footer>

the css becomes

html, body, header, content{
height:100%;
}

@David 2014-12-30 15:43:20

here is my two cents. In comparisson to other solutions, one does not need to add extra containers. Therefor this solution is a bit more elegant. Beneath the code example i'll explain why this works.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

So the first thing we do, is make the biggest container( html ) 100%. The html page is as big as the page itself. Next we set the body height, it can be bigger than the 100% of the html tag, but it should at least be as big, therefore we use min-height 100%.

We also make the body relative. Relative means you can move the block element around relative from its original position. We don't use that here though. Because relative has a second use. Any absolute element is either absolute to the root (html) or to the first relative parent/grandparent. That's what we want, we want the footer to be absolute, relative to the body, namely the bottom.

The last step is to set the footer to absolute and bottom:0, which moves it to the bottom of the first parent/grandparent that is relative ( body ofcourse ).

Now we still have one problem to fix, when we fill the complete page, the content goes beneath the footer. Why? well, because the footer is no longer inside the "html flow", because it is absolute. So how do we fix this? We will add padding-bottom to the body. This makes sure the body is actually bigger than it's content.

I hope i made a lot clear for you guys.

@Sanjeev 2014-09-19 07:16:52

A simple solution that i use, works from IE8+

Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

@Subodh Sharma 2016-09-22 12:18:59

it good..but just Update .pageContentWrapper{ padding-bottom:100px;/* Height of footer*/ }

@Carlos Torres 2019-02-21 19:24:55

Thanks a lot. working on Angular 7

@Константин Ван 2019-07-25 05:58:27

I don’t want to make an unnecessary scroll bar when possible.

@Jose Rui Santos 2014-08-09 12:56:43

Yet, another really simple solution is this one:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.

Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.

@Costa 2014-08-09 22:52:17

I love css tables, but they create issue down the line that are pretty strange: stackoverflow.com/questions/24898115/…

@Kitet 2017-05-25 07:58:41

This solution doesn't seem to be completely working - Firefox ignores footer height 0. I used height 1px or even 1% instead. Edge, IE11, Chrome and mobile safari are happy with 0.

@Axel 2017-07-05 14:54:50

I really love this solution. But when i build my layout like this the browser calculation of child elements are wiered. Let's say we want to have a container at the top of the page and it have to be height: 100% then actually its 100% when the viewport ratio is 1/1 (square). When the viewport gets wider (landscape) height will be more then 100% and if narrower (portrait) less then 100%. So the height is proportinoal to the width of the window. Tried to solve it with another wrapper but this didn't work. Somebody got a solution or at lest a hint???

@Jose Rui Santos 2017-07-05 15:41:34

@Axel In this version I've added a blue div on top with 100% height that occupies all the height (minus the footer height), regardless of viewport width. I think you might have other CSS messing things up. Try to create a minimized version of your issue based on my original jsFiddle

@Jose Rui Santos 2017-07-05 18:37:21

@Axel It might depend on your specific markup, but that can be fixed for all browsers, if you add display: table-row; to the div see here

@Axel 2017-07-06 11:56:54

@JoseRuiSantos Thx again for response. I mocked up some real life markup to illustrate my needs. See working fiddle without sticky footer and not working fiddle with sticky footer. One could say: "if you have a full viewport height element in your page - you don't need a sticky footer anymore!" which is right. But its about making a boilerplate template for cms puposes - so the actual content is unknown. Any help would be very appreciated (thx for your time).

@husayt 2013-09-26 17:09:45

I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.

So using best practices from various sources I came up with this solution:

http://jsfiddle.net/vfSM3/248/

The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.

here is a simple css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

@Tarmil 2013-11-15 10:48:01

I hate sites designed like this. Why do you want to restrict the amount of text I can read at the same time? I don't need to see the header and footer all the time, I know where to find them when I want them.

@husayt 2014-01-07 20:20:29

@Tarmil have a look at numerics.info. Do you see now when this could be useful?

@Ben Jackson 2013-04-20 13:01:09

One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

As such, using position: fixed; (as i've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.

What I've used, and has worked well on desktop and mobile, is:

<body>
    <div id="footer"></div>
</body>

with

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

@kralyk 2014-02-16 22:58:16

this doesn't work in my browser (recent Chromium, desktop)

@RedClover 2017-05-11 14:40:00

It actually works and is very simple! This is what I was looking for.

@Sam Jones 2013-10-18 08:36:15

My jquery method, this one puts the footer at the bottom of the page if the page content is less than the window height, or just puts the footer after the content otherwise:

Also, keeping the code in it's own enclosure before other code will reduce the time it takes to reposition the footer.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

@Liam - Reinstate Monica 2013-07-23 09:35:37

From IE7 onwards you can simply use

#footer {
    position:fixed;
    bottom:0;
}

See caniuse for support.

@Caveatrob 2013-07-23 12:37:19

I don't want the footer at the bottom when there is content beyond the footer. I want the footer to stick to the bottom when there isn't enough, and then expand downward as normal when there is more than a screenful. The sticky footer solved this.

@sleske 2018-07-27 10:17:22

@Caveatrob: I took the liberty of editing this important information into your question, just to avoid misunderstandings (for future readers, you have presumably solved this in the meantime :-) ).

Related Questions

Sponsored Content

27 Answered Questions

[SOLVED] How do you get the footer to stay at the bottom of a Web page?

12 Answered Questions

22 Answered Questions

[SOLVED] Make body have 100% of the browser height

  • 2011-07-11 18:50:56
  • bodyofheat
  • 829171 View
  • 781 Score
  • 22 Answer
  • Tags:   html css height

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 916833 View
  • 1748 Score
  • 31 Answer
  • Tags:   html css html-table

3 Answered Questions

[SOLVED] Footer at bottom of page or content, whichever is lower

1 Answered Questions

[SOLVED] CSS Footer at bottom of page

Sponsored Content