[英]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 http://www.judsondesigns.com/Demos/jscroller/index.html
If you notice in IE, it is causing scrolling. 如果您在IE中注意到,那将导致滚动。 Every other browser is ok. 其他浏览器都可以。 Why is IE causing the scroll? IE为什么导致滚动? 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: 和图片正常的IE10模式:
and in Quirks mode( how I need it to look ) 并在Quirks模式下(我的外观如何)
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. 您应该在包含test123
文本的div
上设置一个负margin-bottom
,该值的值大于底部table-row
的高度。 You could set it to -100%
to be safe, that will fix it in IE, and won't break it in any other browsers. 为了安全起见,您可以将其设置为-100%
,这将在IE中对其进行修复,并且不会在任何其他浏览器中破坏它。
<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 这对我有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.