在 XHTML 1.0 下怎么实现“剩余空间高度的 100%”

2012-02-12

在 XHTML 1.0 下如何实现“剩余空间高度的 100%”？一个高度 100% 的表格，两行。第一行高度 100px，第二行高度

在 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并出现两个滚动条么？

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>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p>  <p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p>  <p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p>  <p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p><p>Bottom</p>  内容结束。  </div></div></body></html> 
 
[解决办法]
这种上下调整还是用JS控制来得好，或者用table布局 更简单

<table height="100%" width="100%">
<tr><td height="100">上</td></tr>
<tr><td >下</td></tr>
</table>

热点排行

CSS

在 XHTML 1.0 下怎么实现“剩余空间高度的 100%”