UC知道上下两个DIV 高度自适应的问题
来源：百度知道 编辑：UC知道 时间：2024/06/22 16:51:01
上下两个DIV
上边一个div的高度为20
下面div高度为100%
body{height:100%;}
<div id="t1" style="height:100px;"></div>
<div id="t2" style="height:100%"></div>
这种情况下，t2的高度为body区域的高度，body区域的高度实际为100%+100px
怎样在保留t1高度100像素的情况下，让t2填满body剩下的区域？
最好不用js控制，如果只能js代码实现，那希望提供的代码直接写到body中的resize事件中，resize的时候也不能刷新整个页面，会加重服务器负担，只要改变浏览器大小就会执行。
再补充一点<div id="t2" style="height:100%; overflow:scroll;"></div>
t2要显示滚动条，滚动条的所有元素要可见。不能用别的层遮盖住t2的任何元素。
答复一楼，我的t1必须要用像素，不能用你所定义的百分比
答复二楼，必须用DIV，问题我已经解决了，写了一段代码并且更换了头部声明解决的，谁有更好的解决方法，发上来共享下，谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
头部声明用这个的情况下能解决此问题的，给全分并再
上边一个div的高度为20
下面div高度为100%
body{height:100%;}
<div id="t1" style="height:100px;"></div>
<div id="t2" style="height:100%"></div>
这种情况下，t2的高度为body区域的高度，body区域的高度实际为100%+100px
怎样在保留t1高度100像素的情况下，让t2填满body剩下的区域？
最好不用js控制，如果只能js代码实现，那希望提供的代码直接写到body中的resize事件中，resize的时候也不能刷新整个页面，会加重服务器负担，只要改变浏览器大小就会执行。
再补充一点<div id="t2" style="height:100%; overflow:scroll;"></div>
t2要显示滚动条，滚动条的所有元素要可见。不能用别的层遮盖住t2的任何元素。
答复一楼，我的t1必须要用像素，不能用你所定义的百分比
答复二楼，必须用DIV，问题我已经解决了，写了一段代码并且更换了头部声明解决的，谁有更好的解决方法，发上来共享下，谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
头部声明用这个的情况下能解决此问题的，给全分并再
因为你BODY是100%但是并没有限定BODY的高度 设计上T2的100%是等于BODY的100%-100px的 是自适应的 但是适应的是T2的内容而不是页面本身 所以你可以通过显示BODY的高度已PX为单位来解决 或者干脆不去管他 T2里有内容 他的高度就会给据内容自动适应的
一下是我 测试的代码：
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="height:auto; width:1000px">
<div id="t1" style="height:100px; width:100%; background-color:#F00"></div>
<div id="t2" style="height:1