上下两个DIV 高度自适应的问题
上下两个DIV上边一个div的高度为20下面div高度为100%body{height:100%;}<divid="t1"style="height:100px;"></...
上下两个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">
头部声明用这个的情况下能解决此问题的，给全分并再追加。
没有一个人能回答解决此问题....失望... 展开
展开全部
要么都用相对高度，要么都用绝对高度。
否则就会产生混乱，因为div在执行的时候是按先后顺序执行的，不是我们的思维想像的那样，除非你高手，完全理解机器执行的过程。
DIV
DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
DIV是除法指令, 使用 DIV 做除法的时候:
(1) 除数: 有 8位和 16 位两种, 在一个寄存器或内存单元中.
(2)被除数: 默认放在 ax 或 dx 和 ax 中, 如果除数为 8 位, 被除数则为 16 位, 默认在 ax 中存放; 如果除数为 16 位, 被除数则为 32 位, 在 dx 和 ax 中存放, dx 存放高 16 位, ax 存放低 16 位.
(3) 结果: 如果除数为 8 位, 则 al 存储除法操作的商, ah 存储除法操作的余数; 如果除数为 16 位, 则 ax 存储除法操作的商, dx 存储除法操作的余数.
否则就会产生混乱，因为div在执行的时候是按先后顺序执行的，不是我们的思维想像的那样，除非你高手，完全理解机器执行的过程。
DIV
DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
DIV是除法指令, 使用 DIV 做除法的时候:
(1) 除数: 有 8位和 16 位两种, 在一个寄存器或内存单元中.
(2)被除数: 默认放在 ax 或 dx 和 ax 中, 如果除数为 8 位, 被除数则为 16 位, 默认在 ax 中存放; 如果除数为 16 位, 被除数则为 32 位, 在 dx 和 ax 中存放, dx 存放高 16 位, ax 存放低 16 位.
(3) 结果: 如果除数为 8 位, 则 al 存储除法操作的商, ah 存储除法操作的余数; 如果除数为 16 位, 则 ax 存储除法操作的商, dx 存储除法操作的余数.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
要么都用相对高度，要么都用绝对高度。
否则就会产生混乱，因为div在执行的时候是按先后顺序执行的，不是我们的思维想像的那样，除非你高手，完全理解机器执行的过程。
否则就会产生混乱，因为div在执行的时候是按先后顺序执行的，不是我们的思维想像的那样，除非你高手，完全理解机器执行的过程。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
只用div的话确实有点难度，LZ为什么不用table，用table的话就很好控制高度，代码如下:
<table style="border: 1px black solid;height: 100%;width:100%;">
<tr style="height: 100px;">
<td style="border: 1px red solid;">111</tr>
</tr>
<tr>
<td style="border: 1px red solid;"><div style="border:1px solid blue;overflow:scroll;height: 100%;">
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
</div></td>
</tr>
</table>
这是你要的效果吗？
<table style="border: 1px black solid;height: 100%;width:100%;">
<tr style="height: 100px;">
<td style="border: 1px red solid;">111</tr>
</tr>
<tr>
<td style="border: 1px red solid;"><div style="border:1px solid blue;overflow:scroll;height: 100%;">
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
222<br/>
</div></td>
</tr>
</table>
这是你要的效果吗？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为你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:100%; width:100%; background-color:#090">sdfgsgs</div>
</body>
</html>
一下是我 测试的代码：
<!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:100%; width:100%; background-color:#090">sdfgsgs</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body {
margin: 0px;
height:100%;
}
*{
margin:0px auto;
}
#all{
height:100%;
width:960px;
background-color:#cccccc;
overflow:hidden; /*超出屏幕外的隐藏*/
}
#top{
height:120px;
width:960px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div id='all'>
<div id="top">top</div>
<!--第二个层的类容 写在父层里面。这样可以在不用脚本的情况下满屏显示 -->
这个怎么样？突然想到的。呵呵
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body {
margin: 0px;
height:100%;
}
*{
margin:0px auto;
}
#all{
height:100%;
width:960px;
background-color:#cccccc;
overflow:hidden; /*超出屏幕外的隐藏*/
}
#top{
height:120px;
width:960px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div id='all'>
<div id="top">top</div>
<!--第二个层的类容 写在父层里面。这样可以在不用脚本的情况下满屏显示 -->
这个怎么样？突然想到的。呵呵
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
