Question

我有一个div，它在服务器中生成的内容是动态的。我需要在表格的顶部放置底行，然后使用CSS完成。但是，当内容增加它的高度时，第四行覆盖第一行。 HTML看起来像这样：

<div class="main">
<table id="news">
<tr id="tr1">
<td id="td1">
<fieldset id="fieldset1">Content</fieldset>
</td>
</tr>
<tr id="tr2">
<td id="td2">
<fieldset id="fieldset2">Content</fieldset>
</td>
</tr>
<tr id="tr3">
<td id="td3">
<fieldset id="fieldset3">Content</fieldset>
</td>
</tr>
</table>
</div>

CSS：

.main { padding-top: 150px; } /* Making room for 3rd row */
#tr3 { margin-top: -500px; } /* Move it above the other rows */

我需要的是找到＃tr3的高度并将此值传递给.main的填充和#tr3的margin-top的方法。我试图将我通过搜索找到的解决方案中的一些东西放在一起，但我的知识并没有扩展，我提出的是：

var tr3Height = document.getElementById('#tr3').clientHeight;
var mainPadding = document.getElementById('.main');

function SetAttribute (ObjectID, Value) { 
   document.getElementById('.main').style.paddingTop = tr3Height + "px";
   document.getElementById('#tr3').style.marginTop = -(500 + tr3Height) + "px";
}

我很确定这是应该怎么做的，但我不知道如何完成它。也许有人可以通过让我朝着正确的方向提供帮助。谢谢。

编辑：我忘了提及：我无法改变.main div中的HTML，因为是服务器生成的。

Answer 1

当前问题：

您有多个使用相同ID的元素。 ID 始终应该是唯一的。
getElementById('#tr3')无效。
getElementById('.main')也无效。
您无法在显示为marginTop的元素上设置table-cell。
你实际上并没有调用你的函数（并且通过你在页面加载时想要的评论来判断）

解决方案（按上述方式排序）：

将标记中的所有重复ID更改为唯一。
这应该是getElementById('tr3')。
使用ID main替换班级main并使用getElementById('main')。
我真的不明白你要用这个部分来实现什么（目前无论如何）......
如果你想加载它就不需要单独的功能，只需使用w indow.onload = function() ..

这将解决您的加载和填充问题（请注意我已将标记更改为具有唯一ID - 请检查下面的jsFiddle），尽管正如您在评论中看到的那样，您的保证金更改在注册时会有没效果：

window.onload = function(){
   var tableRow3Height = document.getElementById('tableRow3').clientHeight;
   console.log(tableRow3Height); // returns 42
   document.getElementById('main').style.paddingTop = tableRow3Height + "px";
   var tableRow3 = document.getElementById('tableRow3');
   tableRow3.style.marginTop = -500 + tableRow3Height + "px";
   console.log(tableRow3.style.marginTop) // returns -458px, although it won't do anything.
};

jsFiddle example here.

查找表格行高度并根据行的高度将填充应用于div

1 个答案: