CODEWITHSUNDEEP
htmlcssinternet-explorerhtml-table
src091
src091

Reputation: 2847

Nested table of 100% height exceeds screen in IE

Here's a piece of code to illustrates my problem:

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            html, body {height:100%;margin:0;padding:0;}
            table {border-collapse:collapse;}
        </style>
    </head>
    <body>
        <table width='100%' height='100%'>
            <tr>
                <td>
                    header
                </td>
            </tr>
            <tr>
                <td valign='top' height='100%'>
                    <table width='100%' height='100%' bgcolor='red'>
                        <tr>
                            <td>test</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

Page that I'm currently building has a header and a table below it, table must take all the vertical space available but must not exceed the screen height. Code above works fine in FF/Chrome/Safari but in IE nested table does exceeds the screen height exactly by the height of header above thus causing vertical scrollbar which is an undesired behavior.

How can this be fixed?

Upvotes: 2

Views: 2350

Answers (2)

Fred Wilson
Fred Wilson

Reputation: 2207

IE is not good about calculating heights in tables. In this case, it's setting the cell height to 100% of the body and html rather than its parent container. Easiest thing to do, but also an ugly hack, is to put

<!–- For Internet Explorer -–> on a line above <!DOCTYPE HTML>

This will force IE into quirksmode and should render properly for your case. You may have to restart IE rather than simply refresh the page after adding the comment.

Upvotes: 2

Saurabh Gokhale
Saurabh Gokhale

Reputation: 46395

Change 

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

to 

html, body {height:100%;margin:0;padding:0; overflow-y: hidden;}

It will remove the vertical scroll-bar from the IE (or any web browser)

Upvotes: 0

Related Questions