‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[教程] div高度100%自动适应

adam1985 [楼主]

初级会员

帖子
30 
体力
68  
威望
0  
当前
广东 深圳
离线
11 天

专长 网页设计,UI,平面
1# 大 中 小 发表于 2008-8-22 10:55 
只需要给html{height:100%;}就能实现了
复制内容到剪贴板
代码:
<div id="layout">
  <div id="left"></div>
  <div id="right"></div>
</div>
复制内容到剪贴板
代码:
* {
        margin:0;
        padding:0;
}
html, body {
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        height:100%;
}
#layout {
        width:780px;
        margin:0 auto;
        height:500px;
}
#left,#right {
        float:left;
        height:100%;
}
#left {
        width:450px;
        background:#ccc;
}
#right {
        width:330px;
        background:#666;
}


 提示：您可以先修改部分代码再运行
[ 本帖最后由 adam1985 于 2008-8-22 10:56 编辑 ]

TOP

uuucat

优优

银牌会员

帖子
718 
体力
1119  
威望
0  
当前
河南 郑州
离线
1 天

专长 前端制作
2# 大 中 小 发表于 2008-8-22 11:12 
加不加html{height:100%;}，没看到有什么区别啊
人性的弱点越掩饰暴露的就越明显。。。。。。。

TOP

cycloned

程让

金牌会员

帖子
1425 
体力
3310  
威望
0  
当前
上海 浦东
离线
2 天

专长 网页设计,前端制作,UE
3# 大 中 小 发表于 2008-8-22 11:17 
html 是给FF看的吧
前端开发

TOP

adam1985 [楼主]

初级会员

帖子
30 
体力
68  
威望
0  
当前
广东 深圳
离线
11 天

专长 网页设计,UI,平面
4# 大 中 小 发表于 2008-8-24 02:38 
引用:
原帖由 cycloned 于 2008-8-22 11:17 发表
html 是给FF看的吧
html加上去基本所有浏览器都能用了

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
shentian

初级会员

帖子
34 
体力
67  
威望
0  
5# 大 中 小 发表于 2008-8-27 16:31 

试试

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
html{height:100%;}
body{ height:100%; margin:0px;}

</style>

</head>

<body onload="ct()" onresize="ct()"><table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="50" bgcolor="#99CC00"></td>
  </tr>
</table>
<table width="100%" border="0" id="jsTable"cellpadding="0" cellspacing="0" bgcolor="#FF9933">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200" bgcolor="#0099CC"></td>
  </tr>
</table>
</body>
</html>
<script language="javascript">
function ct(){

jsTable.style.height=document.documentElement.clientHeight-250;
}
</script>

TOP

sjq617

初级会员

帖子
37 
体力
85  
威望
0  
当前
安徽 铜陵
离线
1 天

专长 网页设计
6# 大 中 小 发表于 2008-8-27 22:31 
这个如果有背景那还能达到要预想的效果吗。。。

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题