CODEWITHSUNDEEP
javascripthtmlcss
Judson Terrell
Judson Terrell

Reputation: 4306

Height 100% issue in IE10. Works in Quirks mode in IE and all other browers

Please see the following page:

http://www.judsondesigns.com/Demos/jscroller/index.html

If you notice in IE, it is causing scrolling. Every other browser is ok. Why is IE causing the scroll? How can I fix this?

Thanks

Judson

here is the code I am using:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
html, body{ 

    height:100%; 
    width: 100%;
    margin: 0px;
    padding: 0px;

 }

</style>
</head>

<body>
<div style="display:table; width: 100%; height:100%;">
<div style="display: table-row; background: red">test</div>
<div style="display: table-row">
        <div style="display: table-cell; height:100%; width:100%;overflow: hidden ">
            <div style=" height:100%; width:100%; overflow:hidden; background: #06F">test123
            </div>
        </div>
</div>
<div style="display:table-row; background: red;">test</div></div>
</div>
</body>
</html>

And a picture normal IE10 mode: Screen Shot of scrolling issue in IE

and in Quirks mode( how I need it to look ) Screen Shot of Quirks mode in IE

Upvotes: 1

Views: 4363

Answers (2)

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

You should set a negative margin-bottom on the div containing the test123 text of a value higher than the height of the table-row at the bottom. You could set it to -100% to be safe, that will fix it in IE, and won't break it in any other browsers.

Here's a jsFiddle

Upvotes: 1

James Daly
James Daly

Reputation: 1386

<div style="width: 100%; height: 100%; display: table; max-height: 100%;">
<div style="background: red; height: 2%; display: table-row;">test</div>
<div style="display: table-row;">
        <div style="width: 100%; height: 96%; overflow: hidden; display: table-cell; max-height: 100%; background-color: blue;">
            <div style="width: 100%; height: inherit; color: green; display: table;">test123456
 asdfasdfasdf           </div>
        </div>
</div>
<div style="background: red; height: 2%; display: table-row;">test</div></div>

this worked for me

Upvotes: 0

Related Questions