673

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which 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.

Improve this question
4

37 Answers 37

Reset to default
1
2
576

Below are 4 different methods of mine:

In each example the texts are freely-editable to illustrate how the content would render in different scenarios.

1) Flexbox

body {
  min-height: 100vh;
  margin: 0;
}

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

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


/* The article fills all the space between header & footer */

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
<header contentEditable>Header</header>
<main contentEditable>Content</main>
<footer contentEditable>Footer</footer>

2) Grid

I think this is the best solution as it allows the maximum control with minimal limitations.

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

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

footer {
  min-height: 50px;
  background: PapayaWhip;
}
<header contentEditable>Header</header>
<main contentEditable>Content</main>
<footer contentEditable>Footer</footer>

3) position:absolute (no dynamic footer height)

The below method 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)

body {
  min-height: 100vh;
  margin: 0;
  position: relative;
}

header {
  min-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;
}
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>

4) Table-layout

html{ height:100%; }
body { min-height:100%;  margin:0; }

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

main { 
  height: 1%;
}

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

/**** Trick: ****/

body {
  display: table;
  width: 100%; 
}

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

5) Calc()

This solution, while works, has drawbacks:

  1. Heights for the header & footer must be set via CSS variables only, and so they cannot exhibit dynamic height to fit their content.
  2. The calculation might not be exactly perfect, and might result in a tiny gap or overflow (which might cause a visible scrollbar).

I've put this here because I would like to outline all possible solutions, good & bad alike.

:root {
  --header-height: 50px;
  --footer-height: 50px;
}

/* minimal reset */
body { margin: 0; }

header {
  height: var(--header-height);
  background: lightcyan;
}

main {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

footer {
  height: var(--header-height);
  background: PapayaWhip;
}
<header contentEditable>Header</header>
<main contentEditable>Content</main>
<footer contentEditable>Footer</footer>

Improve this answer
15
  • 23
    @SteveWaring - Thank you. Updated this answer since it was quite old. Now I'm in favor of using flexbox
    – vsync
    Commented Jun 27, 2017 at 22:20
  • 1
    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.
    – sleske
    Commented Jul 12, 2018 at 13:57
  • 5
    THANK YOU! The flexbox solution is actually simple and uses no hacks or weird fixed sizes or fixed positions.
    – Andrew Koster
    Commented Dec 7, 2018 at 1:04
  • 2
    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% }.
    – mwallisch
    Commented Nov 13, 2019 at 20:19
  • 7
    Another tip would be instead of using height:100vh try to use min-height:100vh there are some cases where contents are far too big on viewport, would instead set it as a minimum height.
    – Brian Coolidge
    Commented Aug 12, 2021 at 20:10
379

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;
}
Improve this answer
7
  • 69
    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?
    – Costa Michailidis
    Commented Jun 23, 2014 at 16:31
  • @Costa check my answer here, for a solution that works with variable height footers.
    – Jose Rui Santos
    Commented Aug 9, 2014 at 18:44
  • for dynamic content just omit the "height" and the footer will adapt to content. Not tested in all browser
    – m47730
    Commented Sep 23, 2015 at 7:58
  • 2
    This seems like a lot of weird tricks, there are answers below which are simple and use no tricks.
    – Andrew Koster
    Commented Dec 7, 2018 at 1:03
  • 1
    The min-height on body is usually enough for me, though setting the value to 100vh (since about 2013) feels like a better value than 100% even though they should be the same on the body. Or you can set the min-height on the main so that the footer is off-screen.
    – Henry Woody
    Commented Feb 1, 2022 at 22:15
93

A very simple flex solution that does 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;
}


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

main {
  flex: 1;
}

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

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

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

header {
  height: 40px;
  background-color: #ccc;
}

footer {
  height: 80px;
  background-color: orange;
}

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

Improve this answer
6
  • 7
    worked like a charm! even for res more than 4k footer sticks at the bottom
    – Arpan Banerjee
    Commented Jun 5, 2020 at 17:29
  • 2
    major browsers ⊅ IE11
    – muthuh
    Commented Aug 14, 2021 at 12:49
  • 1
    Worked! Can you please explain how does it work?
    – Raghav Sharma
    Commented Oct 12, 2021 at 7:26
  • Why it doesn't work in IE 11, if it supports flexbox?
    – Alex78191
    Commented Jul 7, 2022 at 16:46
  • I was trying to play with position but this solution is I think better. thanks
    – MartinF
    Commented Mar 14 at 7:16
76

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>

Improve this answer
2
  • 2
    That approach doesn't work on Firefox on Android, if you resize the window with two fingers
    – rubo77
    Commented Oct 6, 2020 at 23:41
  • Yeah I don't like this approach. It's not very responsive, because if you have a device with a smaller height (e.g. a mobile device) and the content will naturally overflow the viewer height, the footer will overlay on your content because of its absolute positioning. I think the flexbox approach is better.
    – Davis Jones
    Commented Jan 20, 2022 at 12:07
64

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.

Improve this answer
4
  • 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.
    – Steve Waring
    Commented Jul 1, 2017 at 18: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
    Commented Nov 24, 2019 at 14:21
  • 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.
    – Hmerman6006
    Commented Nov 24, 2019 at 14:51
  • min-height: calc(100vh - 200px); with Bulma, here. Thanks!
    – payne
    Commented Oct 22, 2020 at 2:16
54
+50

From IE7 onwards you can simply use

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

See caniuse for support.

Improve this answer
3
  • 110
    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.
    – Caveatrob
    Commented Jul 23, 2013 at 12:37
  • @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 :-) ).
    – sleske
    Commented Jul 27, 2018 at 10:17
  • 2
    This solution is the only one printing the footer to every page and it is so simple! But i cant get it working that the content is not overlapping with the main content. Anyone got a solution for this?
    – Hatzen
    Commented Jun 14, 2020 at 11:37
36

Keep the footer at the bottom by using Flexbox

<div style="min-height:100vh; display:flex; flex-direction:column; 
            justify-content:space-between;">
 
     <div> <!-- Wrapper (Without footer) -->
   
        <header>
         I am a header.
        </header>
  
        <article>
        I am an article!
        </article>
   
    </div> <!-- End: Wrapper (Without footer) -->
 
 
     <footer>
     I am a footer.
     </footer>
 
</div>

Note

  • Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .

  • Make sure that you are wrapping everything but the footer element in a <div> or any other block-level element.

  • Make sure that you using <footer> or any other block-level element to wrap the footer.

Code Explanation

  • min-height: 100vh ensures that the body element will stretch to at least the full height of the screen

  • flex-direction: column keeps the behavior of normal document flow in terms of retaining stacked block elements (which assumes direct children of the body are all indeed block elements).

  • justify-content:space-between pushes the footer to the bottom of the screen.

Check out how to do the same (Keeping the footer at the bottom) by using Bootstrap 5 - Link

Improve this answer
1
  • Simplest but yet amazing, works just fine!
    – anaszaman
    Commented Oct 8, 2021 at 10:09
19

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>
Improve this answer
2
  • it good..but just Update .pageContentWrapper{ padding-bottom:100px;/* Height of footer*/ }
    – Subodh Sharma
    Commented Sep 22, 2016 at 12:18
  • I don’t want to make an unnecessary scroll bar when possible.
    – Константин Ван
    Commented Jul 25, 2019 at 5:58
16

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.

Improve this answer
7
  • I love css tables, but they create issue down the line that are pretty strange: stackoverflow.com/questions/24898115/…
    – Costa Michailidis
    Commented Aug 9, 2014 at 22:52
  • 1
    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.
    – Kitet
    Commented May 25, 2017 at 7:58
  • 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???
    – Axel
    Commented Jul 5, 2017 at 14:54
  • @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
    Commented Jul 5, 2017 at 15:41
  • @JoseRuiSantos Thank you so much for your response. It seems to be a FireFox Bug. See screenshot
    – Axel
    Commented Jul 5, 2017 at 16:56
16

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.

Improve this answer
2
  • 1
    This is the best answer in practice. Using flex-grow: 1 for something above the footer will keep the footer at the bottom properly.
    – iBug
    Commented May 7, 2020 at 16:52
  • 1
    First answer that I found that actually works and doesn't need random divs. Thank you.
    – Chris du Plessis
    Commented Jul 12, 2020 at 17:43
9

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.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<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

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

This works fine

Improve this answer
1
  • good for a small enough screen. but make the screen larger and see what happens: jsfiddle.net/cn13adr5/1
    – ar2015
    Commented Jan 9, 2023 at 11:46
8

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;
}
Improve this answer
0
7

Works for me.

#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}


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


#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

Improve this answer
0
5

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

Improve this answer
0
4

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");
})();
Improve this answer
4

I achieved that using CSS grid, basically I defined 3 rows:

  • Header
  • content
  • footer

And the used grid to define the sizes, the trick is to align the footer at the end of the row, like this:

CSS

body {
    display: grid;
    grid-template-rows: auto auto auto;
}

footer {
    display: grid;
    align-self: end; /* The trick */
}

HTML file

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <header>
    Header content
  </header>
  
  <h1>main body</h1>
  <p>This is a paragraph.</p>
  
  <footer>
    <p>Hello there.</p>
  </footer>
</body>
</html>

You can use more rows but remember to add the to the CSS, or wrap everything inside a div.

This guide here really helped me figure this out.

Improve this answer
4

You need to use position: absolute; this is important, then bottom:0

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
Improve this answer
3

ONE line solution using Bootstrap

Apart from all the CSS and jQuery solutions provided,
I have listed a solution using Bootstrap with a single class declaration on body tag: d-flex flex-column justify-content-between

  • This DOES NOT require knowing the height of the footer ahead of time.
  • This DOES NOT require setting position absolute.
  • This WORKS with dynamic divs that overflow on smaller screens.

html, body {
  height: 100%;
}
<html>

    <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>

    <body class="d-flex flex-column justify-content-between text-white text-center">

        <header class="p-5 bg-dark">
          <h1>Header</h1>
        </header>
        <main class="p-5 bg-primary">
          <h1>Main</h1>
        </main>
        <footer class="p-5 bg-warning">
          <h1>Footer</h1>
        </footer>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    </body>

</html>

Improve this answer
1
  • Nice approach, though you might want to add min-height: 100vh; to the body so it fills the entire viewport
    – paul.ago
    Commented Aug 25, 2020 at 15:04
3

I consider you can set the main content to viewport height, so if the content exceeds, the height of the main content will define the position of the footer

* {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

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

main {
  background: blue;
  /* This is the most important part*/
  height: 100vh; 
  
}
footer{
  background: black;
  height: 50px;
  bottom: 0;
}
<header></header>
<main></main>
<footer></footer>

Improve this answer
1
  • I hit problem when the content in main has bigger high than main. In my case I have many articles in the main as grid. So when the articles count is 50 for example I have very bigger vertical scroll and content in the main has very big high. In this situation the footer appeared somewhere behind my grid. FIX: I set ONLY min-height:100vh instead of height:100vh in the main and working perfectly in every case. P.S. Im using material-ui in reactjs but it does not matter I think
    – Alexander Kolarov
    Commented Feb 15, 2021 at 8:15
3

Position fixed with bottom, left, and right set to 0 works best for me:

.footer {    
    position: fixed;
    background : #d1ccc0;
    bottom : 0;
    left : 0;
    right : 0;
    height : 50px;
}

Position absolute doesn't stick to the bottom, but fixed does.

Improve this answer
2
  • You do realize that puts the footer over the content of the page...?
    – David Martins
    Commented Feb 10, 2023 at 0:52
  • @DavidMartins Then use css grids
    – Cybernetic
    Commented Feb 11, 2023 at 17:38
3

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;
}
Improve this answer
2
  • 3
    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.
    – Tarmil
    Commented Nov 15, 2013 at 10:48
  • 2
    @Tarmil have a look at numerics.info. Do you see now when this could be useful?
    – husayt
    Commented Jan 7, 2014 at 20:20
3

What I did

Html

    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>

CSS

.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }

Don't need to use position fixed and absolute. Just write the html in proper way.

Improve this answer
2
  • This is the best solution. I'm using it. The main answers don't work as good as this simple solution using vh and calc.
    – Andre Maia
    Commented Apr 8, 2022 at 5:42
  • The best solution. It's accurate and the proper solution that we can implement.
    – nipun-kavishka
    Commented Dec 4, 2022 at 18:53
2

You can do this

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

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>
Improve this answer
1
  • 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.
    – fWd82
    Commented Apr 17, 2019 at 11:55
1 
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
Improve this answer
1

It's actually very simple. This solution doesn't require to know footer height.

<body>
  <div class="app">
    Website
  </div>
  <div class="footer">
    Footer
  </div>
</body>

.app {
  min-height: 100vh;
}
Improve this answer
1

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.

Improve this answer
1

While I found many similar answers, the only solution that I could find where the footer was always at the bottom and did not display over the existing data was the following:

footer {
    position: relative;
    clear: both;
}
Improve this answer
1
1 
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top:auto;
}
Improve this answer
1
2

Not the answer you're looking for? Browse other questions tagged or ask your own question.