CSS 高度 100% 不适用于 Internet Explorer 8 中的 DIV 标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1533298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Height 100% not working for DIV tag in Internet Explorer 8
提问by
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:
我有以下代码用于显示带有滚动结果部分的搜索工具。在 IE 中，代码工作正常：
<!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:
但是当我通过添加以下内容将元标记设置为使用 IE8 格式时：
<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.
底部的 DIV 标签扩展到页面之外。我已经尝试了许多选项，但如果没有实际指定值的高度，就无法找到解决方法。这将不起作用，因为无论浏览器窗口的大小如何，我都希望页面占据屏幕的 100%。
Any help would be much appreciated.
任何帮助将非常感激。
回答by Kornel
This metatag enables correct CSS rendering, and in CSS –?by design – height:100%basically doesn't work.
此元标记启用正确的 CSS 呈现，并且在 CSS 中 –?by design –height:100%基本上不起作用。
You need to give specific height to everysingle ancestor of the element, including <body>, <table>, <tr>and even <tbody>element that's automatically inserted by the parser.
您需要为元素的每个祖先指定特定的高度，包括<body>, <table>，<tr>甚至<tbody>是解析器自动插入的元素。
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.
这将在 IE6 中很好地降级，与 不同的是overflow，它将在 Mobile Safari 中正常工作。
回答by Eran Medan
Edit:
编辑：
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
删除 DOCTYPE 声明将使 height="100%" 工作，但它会将浏览器置于怪癖模式，这是不可取的。
Generally speaking using tables for layout is discouraged, you should use CSS instead.
一般来说，不鼓励使用表格进行布局，您应该使用 CSS 来代替。
For example: http://jsfiddle.net/rf649/7/
例如：http: //jsfiddle.net/rf649/7/
HTML
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;
}
?
回答by arno
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. :)
更新：对不起，没有立即理解问题。Ben 的提示应该是我认为更好的提示。:)
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.
更新 2：糟糕，因为 Ben 删除了他的回答，所以我的第一次更新没有任何意义。尝试将身体的高度设置为 100%，这应该可以解决问题。
回答by tucaz
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
我对跨浏览器 CSS 的理解不是很大，所以它可能不是最好的解决方案，但它是一个解决方案。
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.
为了解决这个问题，我建议您在 onReady 事件中添加一个 jQuery 脚本，该脚本可以动态修复高度和宽度，从而使溢出起作用。
回答by osanchezmon
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !importantmodificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the heightassigned to 100%, but the CSS applied the !importantduring the style loading.
我和你有类似的问题，最后的解决方案是修改一个 CSS 行条目，该条目!important具有固定高度声明的修改器。在 HTML 代码中，类（在 CSS 中定义）已height分配给100%，但 CSS!important在样式加载期间应用了。
