在 XHTML 1.0 下怎么实现“剩余空间高度的 100%”
日期：2014-05-17 浏览次数：20609 次
在 XHTML 1.0 下如何实现“剩余空间高度的 100%”？
一个高度 100% 的表格，两行。第一行高度 100px，第二行高度希望设置为剩余空间的 100%，可是怎么设置都不行，很是郁闷，特此求助。
请看以下代码：
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body{height:100%;margin:0px}
</style>
</head>
<body>
<table style="width: 100%;height:100%" cellpadding="0" cellspacing="0">
<tr>
<td style="height:100px;background-color:gray">menu</td>
</tr>
<tr>
<td>
<div style="height:100%;background-color:yellow;overflow:scroll">content</div>
</td>
</tr>
</table>
</body>
</html>
在 HTML 4.0 中是没问题的，row2 内的 div 是高度 100%，可以通过边框和背景色清楚地看到。但是 XHTML 1.0 就不行。
注：
1. 我知道将标准修改成 HTML 4.0 没问题，但是我现在需要的是 XHTML 1.0。
2. 通过 overflow:hidden 我试过，表面上看可以，但是 row2 里面的 div 的滚动条显示超出屏幕很多。
3. 用 div 实现该功能也可以。主要就是要 div 能占满剩余空间的 100%，并保证横竖两个滚动条的显示。
4. 用纯 css 实现。
谢谢！
------解决方案--------------------
按楼主的标题来看，下面似乎就能实现，楼主想要下边<tr><td>中的DIV也填满TD并出现两个滚动条么？
一个高度 100% 的表格，两行。第一行高度 100px，第二行高度希望设置为剩余空间的 100%，可是怎么设置都不行，很是郁闷，特此求助。
请看以下代码：
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body{height:100%;margin:0px}
</style>
</head>
<body>
<table style="width: 100%;height:100%" cellpadding="0" cellspacing="0">
<tr>
<td style="height:100px;background-color:gray">menu</td>
</tr>
<tr>
<td>
<div style="height:100%;background-color:yellow;overflow:scroll">content</div>
</td>
</tr>
</table>
</body>
</html>
在 HTML 4.0 中是没问题的，row2 内的 div 是高度 100%，可以通过边框和背景色清楚地看到。但是 XHTML 1.0 就不行。
注：
1. 我知道将标准修改成 HTML 4.0 没问题，但是我现在需要的是 XHTML 1.0。
2. 通过 overflow:hidden 我试过，表面上看可以，但是 row2 里面的 div 的滚动条显示超出屏幕很多。
3. 用 div 实现该功能也可以。主要就是要 div 能占满剩余空间的 100%，并保证横竖两个滚动条的显示。
4. 用纯 css 实现。
谢谢！
------解决方案--------------------
按楼主的标题来看，下面似乎就能实现，楼主想要下边<tr><td>中的DIV也填满TD并出现两个滚动条么？
- HTML code
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body
{
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<table style="width: 100%; height: 100%" cellpadding="0" cellspacing="0">
<tr style="height: 100px;">
<td style="background-color: gray">
menu
</td>
</tr>
<tr style="height: 100%;">
<td style="background-color: yellow;">
</td>
</tr>
</table>
</body>
</html>
------解决方案--------------------
js
设置
<div id="x" style="height: 100%; background-color: yellow; overflow: scroll">
content</div>
<script>
window.onload = function () {
document.getElementById("x").style.height = document.getElementById("x").parentNode.offsetHeight + "px"
}
</script>
------解决方案--------------------
下面的代码在IE8和Firefox下测试通过
- HTML code
<!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">
<head>
<title>无标题文档</title>
<style type="text/css">
html, body
{
margin:0;padding:0;height:100%;
}
</style>
</head>
<body>
<div style="background:red;height:100%; position: relative;">
<div style="background:gray;height:100px">header</div>
<div style="background:orange;position: absolute; top: 100px;bottom:0;width:780px;overflow:scroll">
内容开始，设置width:780px;为了区分滚动条是div的不是整个窗口的。你可以设置成width:100%
<p>Bottom</p><p>Botto
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
