CODEWITHSUNDEEP
csshtmloverflow
Water Cooler v2
Water Cooler v2

Reputation: 33850

HTML Table Overflows Footer

What this problem is NOT

I do not have the very common problem of the footer not sticking to the bottom of the page. The footer does stick to the bottom of the page, and that's fine.

What the problem is:

When I have more records in my table than the height of the browser window, the table's height overflows the footer. The footer appears sticking to the bottom of the page/window but just a few rows above the table's last row.

It looks like this:

enter image description here

I am using HTML 5 with ASP.NET MVC and this happens in all browsers.

I have the following HTML structure:

<div id = "header">...</div>

<div id = "parent">
  <form id = "frm">
    <div id = "gridContainer">
      <table id = "theStringsGrid">
        ....
      </table>
    </div>
  </form>
  <div class = "push" ></div>
</div>

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

And the following CSS (only the relevant parts are given below):

html, body { margin: 0; padding: 0; height: 100%; font-family: Sans-Serif; font-size: small; }

#parent { min-height: 100%; position: relative; margin: 0 20px -4em; }

.push { clear: both; }

#footer { height: -4em; clear: both; margin-left: 4px; margin-right: 4px; }

#theStringsGrid 
{ 
    table-layout: fixed;

    margin-left: 40px;
    margin-right:20px;

    border-width: 2px; 
    border-color: Gray; 
    border-style: groove; 

    font-family: Century Gothic, Calibri, Batang, Verdana, Arial;

    padding-left: 2px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;

    table-layout: fixed;
    width: 1200px;
}

#theStringsGrid tr { line-height: 9px; }

#theStringsGrid tr td 
{ 
    border-style: groove; 
    border-width: 0px; 
    border-color: Gray; 
    padding: 2px 2px 2px 2px; 

    height: 14px;
    overflow: hidden;
}

UPDATE: FIXED

Thank you all for the time you spent on my problem. All your comments and answers were really helpful in enabling me to track down the problem.

But my light-bulb went on because of @JamesDonnelly's comment to the question that reads, "Why does your footer have -4em height?".

I changed the height of the footer from -4em to 4em and the bottom margin of #parent also from -4em to 4em and the thing now looks nice like this:

enter image description here

Here are the changes I made:

#parent { min-height: 100%; position: relative; margin: 0 20px 4em; }

#footer { height: 4em; clear: both; margin-left: 4px; margin-right: 4px; }

Upvotes: 2

Views: 2841

Answers (3)

James Donnelly
James Donnelly

Reputation: 128791

You simply need to remove the - from your footer's height:

#footer { height: 4em; ... }

Upvotes: 3

Stefano Bosio
Stefano Bosio

Reputation: 11

If you leave position fixed on your table it will always goes over the footer.

3 solutions:

  1. use position relative on the table but it depends on what you need

  2. use z-index on footer so it stays up to the overflow

  3. set max height to your table and allow overflow inside it so you can scroll.

Hope this helps!

Upvotes: 1

JoDev
JoDev

Reputation: 6873

Maybe the best idea will be to set a max-height to the parent element of the #theStringsGrid table...

#gridContainer {
     max-height : 1000px;/*for example*/
     overflow-y: auto; /* scroll only if needed*/
}

And to set correctly the max-height of the table, use some jQuery : 

var refreshMaxHeight = function() {
   //try it but document should be better
   var windowsHeight= $( window ).height(); // returns height of browser viewport
   var windowsHeight= $( document ).height(); // returns height of HTML document
   $('#gridContainer').css({'max-height' :
         windowsHeight
         -$('#footer').height()
         -$('#gridContainer').position().top
    });
};
$(document).ready(function() {
    refreshMaxHeight();
    //manage the resize event could be a good idea
    $( window ).resize(function() { refreshMaxHeight();});

});

Upvotes: 2

Related Questions