Height 100% not working for DIV tag in Internet Explorer 8_问答_开发者

Height 100% not working for DIV tag in Internet Explorer 8

开发者 https://www.devze.com 2022-12-08 02:54 出处：网络

I have the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html style="background:black;height:100%;width:100%;">
    <head>
      <title>Report</title> 
    </head>
    <body style="background:black;">
      <table HEIGHT="100%" WIDTH="100%" style="background:red;">
      <tr>
      <td>
        Search Area  
      </td>
      </tr>
      <tr>
      <td HEIGHT="100%" WIDTH="100%" style="background:orange;">
        <div style="overflow-y:scroll;height:100%;">
          <table style="width:100px;height:1000px;">
          <tr>
          <td style="background:white;">
            Results Area
          </td>
          </tr>
          </table>
        </div>      
      </td>
      </tr>
      </table>
    </body>
    </html>

But when I set the meta tag to use IE8 formatting by adding:

开发者_JAVA技巧<meta http-equiv='X-UA-Compatible' content='IE=edge' />

The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.

Any help would be much appreciated.

This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.

You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.

Anyway, this layout can be achieved in easier way:

.topBanner {
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%;
}
body {padding-top: 2em}

this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.

Edit:

Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.

Generally speaking using tables for layout is discouraged, you should use CSS instead.

For example: http://jsfiddle.net/rf649/7/

HTML

<div id="search">Search Area</div>
<div id="results">Results Area</div>

CSS:

#search {
    background-color: red;
    position: fixed;
    height: 150px;
    width: 100%;
}
#results{
    background-color: orange;
    position: fixed;
    top: 150px;
    width: 100%;
    bottom: 0;
    overflow: auto;
}

You should set all margins and paddings for the parent elements to zero in order to get what you want.

Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)

Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.

My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.

As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.

To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.

I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.