高度100％不適用於Internet Explorer 8中的DIV標記
[英]Height 100% not working for DIV tag in Internet Explorer 8
問題描述
我有以下代碼用於顯示帶有滾動結果部分的搜索工具。 在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>
但是當我通過添加以下內容將元標記設置為使用IE8格式時：
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
底部DIV標記擴展到頁面之外。 我已經嘗試了很多選項但是沒有實際指定值的高度就無法找到解決方法。 這不起作用，因為我希望頁面占據屏幕的100％，無論瀏覽器窗口的大小。
任何幫助將非常感激。
5 個解決方案
解決方案1
5 2009-12-20 23:52:41
這個metatag可以實現正確的CSS渲染，而在CSS中 - 按設計 - height:100% 基本上不起作用 。
您需要為元素的每個祖先賦予特定高度，包括<body> ， <table> ， <tr>甚至<tbody>元素，它們由解析器自動插入。
無論如何，這種布局可以更簡單的方式實現：
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
這將在IE6中很好地降級，與overflow不同，它將在Mobile Safari中正常工作。
解決方案2
1 2010-01-03 19:36:40
編輯：
刪除DOCTYPE聲明將使height =“100％”工作，但它會使瀏覽器處於怪異模式，這是不可取的。
一般來說，不鼓勵使用表格進行布局，你應該使用CSS代替。
例如： 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;
}
解決方案3
0 2009-10-07 18:19:23
您應該將父元素的所有邊距和填充設置為零，以便獲得所需的內容。
更新：對不起，馬上就不明白這個問題了。 Ben的暗示應該是我假設的更好的暗示。 :)
更新2：哎呀，因為Ben刪除了他的答案，我的第一次更新沒有任何意義。 嘗試將身體的高度設置為100％，這應該可以解決問題。
解決方案4
0 2009-10-07 18:19:50
我對跨瀏覽器CSS的理解並不是那么大，所以它可能不是最好的解決方案，但它是一個解決方案。
據我所見，您始終必須設置要溢出的容器的高度/寬度，因此您需要設置它們。
為了解決這個問題，我建議你在onReady事件中添加一個jQuery腳本，動態修復高度和寬度，使溢出工作。
解決方案5
0 2009-12-16 16:22:12
我有類似你的問題，最后解決方案是修改一個CSS行條目，該條目有一個固定高度聲明的!important修飾符。 在HTML代碼中，類（在CSS中定義）的height分配為100% ，但CSS在樣式加載期間應用了!important 。
Div不在Internet Explorer中占用表格單元格的100％高度嗎？
[英]Div is not taking 100% height of a table-cell in internet explorer?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.