61,112
社区成员
发帖
与我相关
我的任务
分享帮忙看看如何在IE里面使中间的行充满其余的空间!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:waistate="http://www.w3.org/2005/07/aaa">
<head>
<style type="text/css">
html, body, form, table {
margin:0px;
height:100%;
}
</style>
<title></title>
</head>
<body id="body1" style="-rave-layout: grid" onload="" onunload="">
<form id="form1" class="form" method="post" action="/WebApplication7/faces/Login.jsp" enctype="application/x-www-form-urlencoded">
<table border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;">
<tbody>
<tr style="height:80px;">
<td>
</td>
</tr>
<tr style="height:100%;">
<td>
aaa
</td>
</tr>
<tr style="height:20px;">
<td style="border-top:1px solid lightblue;">
copyright
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
以上代码在FF里面可以实现中间的行充满除上下两行占用的100px空间外的所有页面，而且不出现滚动条。
但在IE6里面就不行，中间的行真的占用的100%页面高度，加上上下两行，就超出了页面高度，使滚动条出现了。如果将第2行的style="height:100%"去掉，第2行又被压缩得只剩下一点点。请问在IE应该如何设置才对。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:waistate="http://www.w3.org/2005/07/aaa">
<head>
<style type="text/css">
html, body, form, table {
margin:0px;
height:100%;
}
</style>
<title></title>
</head>
<body id="body1" style="-rave-layout: grid" onload="" onunload="">
<form id="form1" class="form" method="post" action="/WebApplication7/faces/Login.jsp" enctype="application/x-www-form-urlencoded">
<table border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;">
<tbody>
<tr style="height:80px;">
<td>
</td>
</tr>
<tr style="height:100%;">
<td>
aaa
</td>
</tr>
<tr style="height:20px;">
<td style="border-top:1px solid lightblue;">
copyright
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
以上代码在FF里面可以实现中间的行充满除上下两行占用的100px空间外的所有页面，而且不出现滚动条。
但在IE6里面就不行，中间的行真的占用的100%页面高度，加上上下两行，就超出了页面高度，使滚动条出现了。如果将第2行的style="height:100%"去掉，第2行又被压缩得只剩下一点点。请问在IE应该如何设置才对。
...全文
请发表友善的回复…
发表回复
yixianggao 2007-08-29
- 打赏
- 举报
妥了，L@_@K
用样式表俺搞不定，不过结合 js 就可以了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:waistate="http://www.w3.org/2005/07/aaa">
<head>
<style type="text/css">
html, body, form, table {
margin:0px;
height:100%;
}
</style>
<title></title>
</head>
<body id="body1" style="-rave-layout: grid" onload="" onunload="">
<form id="form1" class="form" method="post" action="/WebApplication7/faces/Login.jsp" enctype="application/x-www-form-urlencoded">
<table border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;border-collapse:collapse">
<tbody>
<tr style="height:80px; background-color: red;">
<td>
</td>
</tr>
<tr style="background-color: green;" id="trMain">
<td>
aaa
</td>
</tr>
<tr style="height:20px; background-color: blue;">
<td style="border-top:1px solid lightblue;">
copyright
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
<!--
var oTr = document.getElementById("trMain");
var hTotal = oTr.parentNode.parentNode.offsetHeight;
var hTr1 = parseInt(oTr.previousSibling.style.height);
var hTr3 = parseInt(oTr.nextSibling.style.height);
oTr.style.height = hTotal - hTr1 - hTr3 - 4;
//-->
</script>
</body>
</html>
用样式表俺搞不定，不过结合 js 就可以了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:waistate="http://www.w3.org/2005/07/aaa">
<head>
<style type="text/css">
html, body, form, table {
margin:0px;
height:100%;
}
</style>
<title></title>
</head>
<body id="body1" style="-rave-layout: grid" onload="" onunload="">
<form id="form1" class="form" method="post" action="/WebApplication7/faces/Login.jsp" enctype="application/x-www-form-urlencoded">
<table border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;border-collapse:collapse">
<tbody>
<tr style="height:80px; background-color: red;">
<td>
</td>
</tr>
<tr style="background-color: green;" id="trMain">
<td>
aaa
</td>
</tr>
<tr style="height:20px; background-color: blue;">
<td style="border-top:1px solid lightblue;">
copyright
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
<!--
var oTr = document.getElementById("trMain");
var hTotal = oTr.parentNode.parentNode.offsetHeight;
var hTr1 = parseInt(oTr.previousSibling.style.height);
var hTr3 = parseInt(oTr.nextSibling.style.height);
oTr.style.height = hTotal - hTr1 - hTr3 - 4;
//-->
</script>
</body>
</html>
Brunhild 2007-08-29
- 打赏
- 举报
多谢楼上.不过要用JS感觉有点不够完美.先看看,再结帐.
