Height 100%的问题_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:52:28
原创
1143 人浏览过

声明文档模式后,在IE中以下代码height 100%达不到效果。
1.不采用header中注释的方法;
2.不采用给定的高度。
有什么好的方法吗?求助!

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    无标题页


    



























123




回复讨论(解决方案)

html,body{height:100%;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

html,body{height:100%;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制



这个试过的,没用。


html,body{height:100%;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制



这个试过的,没用。




IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html


html,body{height:100%;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制



这个试过的,没用。





html,body{height:100%;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制



这个试过的,没用。




IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html



第二种方法确实有效,不过我在问问题的时候已经提前说明了,不采用给定的固定高度,也不能破坏现有的代码结构(去除doctype的声明)。
第一种方法与问的问题不同,问题中是Table,并且td是跨行的,尝试用这种方法并未实现。

哦.那就不用height:100%,这个属性只有在父级定义高度的情况下才有效.

你就position:absolute;top:50%,之后再根据内容块的高度写margin-top:- 内容块高度1/2

哦.那就不用height:100%,这个属性只有在父级定义高度的情况下才有效.

你就position:absolute;top:50%,之后再根据内容块的高度写margin-top:- 内容块高度1/2



也不能用绝对定位,第二行里的内容是可变的,并且这种TABLE会有很多。
其实我想实现的功能很简单,就是给多个TABLE的td添加两条不同颜色的左边框线。如果只是一条,倒也省事了。

td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue}
登录后复制
登录后复制


<!DOCTYPE html><html><head><title>无标题页</title><style type="text/css">/*CSS3 nth-child() 选择器*/td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue}</style><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><script type="text/javascript">/*$(document).ready(function(){	$("#mytable").find("td").css("border-left", "2px solid red");	$("#mytable").find("td:odd").css("border-left", "2px solid blue");});*/</script></head><body><table id="mytable">  <tr>    <td> </td>    <td> </td>    <td> </td>	<td> </td>  </tr></table></body></html>
登录后复制
登录后复制

td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue}
登录后复制
登录后复制


<!DOCTYPE html><html><head><title>无标题页</title><style type="text/css">/*CSS3 nth-child() 选择器*/td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue}</style><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><script type="text/javascript">/*$(document).ready(function(){	$("#mytable").find("td").css("border-left", "2px solid red");	$("#mytable").find("td:odd").css("border-left", "2px solid blue");});*/</script></head><body><table id="mytable">  <tr>    <td> </td>    <td> </td>    <td> </td>	<td> </td>  </tr></table></body></html>
登录后复制
登录后复制



这不对的,是实现一列有两条不同颜色的左边框线,所以我上面代码用了单列跨两行,可以将header中我注释的部分放开看下,截图效果:
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!