子元素绝对定位,怎么让子元素宽度自适?求帮助。

寒飞a 2014-04-23 09:44:39

<table width="100%" height=“100%">
<tr>
<td width="300px"></td>
<td id="ttttt">
<div class="jueduidingwei"></div>
</td>
</tr>
</table>

.jueduidingwei
{
position:absolute;bottom:0px;width:100%;
}
问：如何使绝对定位的div使用100%的宽度自动适应父元素，也就是ID为ttttt的宽度。也就是table宽度-300的宽度，用纯css
解决方法：在ttttt处加上 style="position: relative;"。即可自动适应，测试IE8-11 谷歌都通过。
唯独火狐不行，求解决方法。

...全文

1641 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

寒飞a 2014-04-26

打赏
举报

引用 4 楼 net_lover 的回复:

可以使用jquery动态计算位置比较方便并且兼容性好些

<!doctype html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
       <td width="300px">A</td>
       <td id="ttttt">B
<div class="jueduidingwei">cc</div>
       </td>
</tr>
</table>
<style>
html,body{height:100%;border:0;padding:0;margin:0}
#ttttt{background:green;padding:0;margin:0}
.jueduidingwei
{
 position:absolute;background:red;
}
</style>
<script>
$(function(){
$(".jueduidingwei").css("top",$("#ttttt").get(0).offsetHeight - $(".jueduidingwei").height() + "px")
$(".jueduidingwei").css("width",$("#ttttt").get(0).offsetWidth + "px")
$(".jueduidingwei").css("left",$("#ttttt").prev().get(0).offsetWidth + "px")
});
</script>

顺便帮忙看下另外个问题吧http://bbs.csdn.net/topics/390770333。你辛苦了，分给你啦。

寒飞a 2014-04-26

打赏
举报

谢谢了，这个问题我已经解决，需在tttt处加上display:block即可解决火狐的问题。

孟子E章 2014-04-26

打赏
举报

可以使用jquery动态计算位置比较方便并且兼容性好些

<!doctype html>

<html>

<head>

<script src="jquery-1.10.2.min.js"></script>

</head>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

       <td width="300px">A</td>

       <td id="ttttt">B

<div class="jueduidingwei">cc</div>

       </td>

</tr>

</table>

<style>

html,body{height:100%;border:0;padding:0;margin:0}

#ttttt{background:green;padding:0;margin:0}

.jueduidingwei

{

 position:absolute;background:red;

}

</style>

<script>

$(function(){

$(".jueduidingwei").css("top",$("#ttttt").get(0).offsetHeight - $(".jueduidingwei").height() + "px")

$(".jueduidingwei").css("width",$("#ttttt").get(0).offsetWidth + "px")

$(".jueduidingwei").css("left",$("#ttttt").prev().get(0).offsetWidth + "px")

});

</script>