61,115
社区成员
发帖
与我相关
我的任务
分享Height 100%的问题
声明文档模式后，在IE中以下代码height 100%达不到效果。
1.不采用header中注释的方法；
2.不采用给定的高度。
有什么好的方法吗？求助！
<!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='X-UA-Compatible' content='IE=6'>-->
<title>无标题页</title>
</head>
<body style="HEIGHT: 100%; ">
<TABLE align="center">
<TBODY>
<TR>
<TD>
<TABLE>
<TBODY>
<TR>
<TD style="HEIGHT:100%" rowSpan=2>
<TABLE style="BORDER-COLLAPSE: collapse;HEIGHT:100%;"><!--HEIGHT:100px-->
<TBODY>
<TR height="50%">
<TD style="border-left:2px solid red"></TD>
</TR>
<TR height="50%">
<TD style="border-left:2px solid blue"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD vAlign=middle>
123
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
1.不采用header中注释的方法；
2.不采用给定的高度。
有什么好的方法吗？求助！
<!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='X-UA-Compatible' content='IE=6'>-->
<title>无标题页</title>
</head>
<body style="HEIGHT: 100%; ">
<TABLE align="center">
<TBODY>
<TR>
<TD>
<TABLE>
<TBODY>
<TR>
<TD style="HEIGHT:100%" rowSpan=2>
<TABLE style="BORDER-COLLAPSE: collapse;HEIGHT:100%;"><!--HEIGHT:100px-->
<TBODY>
<TR height="50%">
<TD style="border-left:2px solid red"></TD>
</TR>
<TR height="50%">
<TD style="border-left:2px solid blue"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD vAlign=middle>
123
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
...全文
请发表友善的回复…
发表回复
changdong_wang 2014-12-09
- 打赏
- 举报
这不对的，是实现一列有两条不同颜色的左边框线，所以我上面代码用了单列跨两行，可以将header中我注释的部分放开看下，截图效果：
daswcszxw 2014-12-09
- 打赏
- 举报
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>
changdong_wang 2014-12-09
- 打赏
- 举报
也不能用绝对定位，第二行里的内容是可变的，并且这种TABLE会有很多。
其实我想实现的功能很简单，就是给多个TABLE的td添加两条不同颜色的左边框线。如果只是一条，倒也省事了。
daswcszxw 2014-12-09
- 打赏
- 举报
哦.那就不用height:100%,这个属性只有在父级定义高度的情况下才有效.
你就position:absolute;top:50%,之后再根据内容块的高度写margin-top:- 内容块高度1/2
changdong_wang 2014-12-09
- 打赏
- 举报
这个试过的，没用。[/quote]
这个试过的，没用。[/quote]
IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html[/quote]
第二种方法确实有效，不过我在问问题的时候已经提前说明了，不采用给定的固定高度，也不能破坏现有的代码结构（去除doctype的声明）。
第一种方法与问的问题不同，问题中是Table，并且td是跨行的，尝试用这种方法并未实现。
daswcszxw 2014-12-09
- 打赏
- 举报
这个试过的，没用。[/quote]
IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html
changdong_wang 2014-12-09
- 打赏
- 举报
这个试过的，没用。
daswcszxw 2014-12-09
- 打赏
- 举报
html,body{height:100%;}
