Height 100% issue in IE10. Works in Quirks mode in IE and all other browers
Question
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:
and in Quirks mode( how I need it to look )
2 answers
solution1
1 2013-05-22 03:42:44
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
solution2
0 2013-05-22 00:53:17
<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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.