Question

我有一个div放在我的页面上style = "z-index:1;position:absolute;"这个div的（x，y）位置是用

设置的

$(onMouse).css('left',(mouseX - offSetX) + "px");
$(onMouse).css('top',(fixY) +"px");

动态地和那件作品很好。（但我认为这可能是相关的）

在那个div中我放置一个由两行组成的表。第一行是一个包含一个单元格的表。第二行包含一个新的div，其样式我用

设置

$(scrollDiv).css("overflow","hidden");
$(scrollDiv).css("position","relative");
$(scrollDiv).css("height","100px");

这第二个div包含一个表，其中包含大量行。我想在scrollDiv的高度切断这些行，但它不会这样做。它只显示存在的所有行。有谁知道我做错了什么？

编辑＃1

感谢 Tim Dodd 和 Dan 的回复！我已经使用了你创建的JSFiddle并将其修改为我的意思的通用版本，以便更清楚。您可以在此处找到它：http://jsfiddle.net/S3sh7/1/

我想要的是在click上创建的表显示与原始表相同的行。我认为您可以通过设置overflow和height属性来完成此操作，就像我使用.pieceOfTable CSS类一样，但它无法正常工作。你知道我会怎么做到这一点吗？

Answer 1

我这样做了一百万次，这是我理解你的问题的唯一原因。你需要做这样的事情。

<div id="TblWrapper">
 <div id= "TblHeader"><table><th>ColumnHeader</th></table></div>
<div id = "TblBody">
   <table>
   <tr><td>A</td></tr>
    <!-- more Rows-->
   </table>
</div>
</div>

然后你用这种风格做这样的事情......

#TblWrapper
{
    Height:210 px;
}

#TblBody
{
    Height: 200px;
    overflow-y:scroll;
}

看看here的例子。我在示例中添加了一些背景颜色，以便您可以看到整个事物是如何构建的。

美丽的部分是它没有任何笨重的JavaScript的能力。在这种情况下会导致滚动显得不连贯。

Answer 2

设置overflow-y：滚动;在#TblBody或表格上并将其设置为所需的高度。

Answer 3

像定义一些东西 -

min-width: define; 
width: define;
max-width: define;

并通过一些嵌套操作切换overflow-y:？

Answer 4

嗯，首先......

$(onMouse).css({
  left: (mouseX - offSetX) + "px",
  top: fixY +"px"
});

$(scrollDiv).css({
  overflow: 'hidden',
  position: 'relative',
  height: '100px'
});

除此之外，点击时显示的div没有高度值或overflow:hidden。也可能有意义的是给它一个边框，这样用户就可以看到它切断的地方/原因......？

#floater {  <-- based off of your fiddle. Update if needed.
  height: 200px;
  overflow-y: auto;
  border: 1px solid #000;
}

绝对定位的div隐藏溢出

4 个答案: