How do I prevent my footer from taking up too much height?

Question

I have a fairly standard page layout -- header, div with content and footer

    <header>
        <div id="banner">
        Header
        </div>
        </header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

I would like the footer section to take up the remaining height on my HTML page so I applied these styles

html {
    height: 100%;
}

body {
    margin: 0;
    text-align: center;
    height: 100%;
}


footer {
        background-color: #003162;
        padding: 5px;
        height: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 80%;
}

footer, footer a {
        color: #fdb515;
}

What is odd is that the footer is taking up too much space. It is causing a scroll even though that's not what I requested -- https://jsfiddle.net/g7Ldc7pt/2/ . How do I tell the footer to take up the remaining visible space? I only want a scroll bar if the content isn't visible but its all there.

score 0 · Answer 1 · answered Apr 17 '18 at 18:51

0

Once you add some content to the page it will look better. https://jsfiddle.net/g7Ldc7pt/3/ Additionally, instead of making the height of the footer be 100% make it something like 20%

html {
    height: 100%;
}

    body {
        margin: 0;
        text-align: center;
        height: 80%;
    }
    footer {
        background-color: #003162;
        padding: 5px;
        height: 20%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 80%;
    }

answered Apr 17 '18 at 18:51

John Salzman

500
5
14

In the spirit of the SO guideline, post a simple example, I scaled things down. The point of my question is how do I make the footer take up as much space as possible but no more? I don't want to assign an arbitrary height to the footer because that will not work in every situation. – satish Apr 17 '18 at 19:24

DCR · Answer 2 · 2018-04-18T14:48:19.347

0

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

section {
  display: flex;
  flex-flow:column;  
  height: 100%;
}
header {  
  background: tomato;
}
div {  
  background: gold;
  overflow: auto;
}
footer {
  flex: 1 1 auto;
  background: lightgreen;  
}

<section>
  <header>
    header: sized to content
    
  </header>
  <div>
    main content: sized to content
   x<br>x<br>x<br>x<br>x<br>
    
   
  </div>
  <footer>
    footer: remaining height
  </footer>
</section>

edited Apr 18 '18 at 14:48

answered Apr 17 '18 at 19:03

DCR

14,737
12
52
115

Here you are assigning arbitrary heights to the header and content section. Is there any way to do this without doing that? I want those sections to be whatever size the content within them is. – satish Apr 17 '18 at 19:23
I made the changes you're looking for in the snippet. Just comment out or delete the height in css for those sections – – DCR Apr 17 '18 at 20:02
Thanks but what value do I put for the "footer" height? You have "height: calc(15% - 10px);" but that seems to be a hold over from teh old height values you had for the other two sections. – satish Apr 17 '18 at 20:45
how big do you want your footer? Do you want it to take up the entire page if there's no content? What do you want to do when the content takes up all the available space and creates a scroll bar? How big should the footer be? If you want more help accept the answer and we can take this offline in a chat. You can remove the height from footer but that will give you about the same thing – DCR Apr 17 '18 at 21:44
There will always be a header and some content, but if that takes up the whole page, then the footer can be whatever height. The main use case I want to address is if there is extra space on the page, I'd like the footer to take up the remaining space. – satish Apr 18 '18 at 14:01
ok, I've updated my answer. Let me know if that's what you are looking for – DCR Apr 18 '18 at 14:46

How do I prevent my footer from taking up too much height?

2 Answers2