javascript - 摆脱滚动条

我正在尝试做一个简单的工具提示。问题是当我单击底部按钮时，工具提示会显示页面滚动条。在这种情况下，我希望工具提示应与页面底部对齐而没有滚动条。

HTML：

<div class="main">
  <table>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
  </table>

<div class="pop">Text</div>
</div>

 JS:
$(".main").on("click", "button", function(){
  var top = $(this).offset().top;
  $(".pop").show(".pop");
  $(".pop").css("top", top)

})

$(".pop").click(function(){
  $(this).css("display", "none")
})

样本：http://codepen.io/anon/pen/jEdRoY

最佳答案

您必须使用JavaScript计算高度。

在CSS中不可能的原因是由于固定的height，top偏移量和bottom偏移量之间的冲突。

但是您可以使用以下代码来计算溢出并根据情况进行切换。

if(($("html").height() - (top + 400)) > 0) {
    //set top offset
} else {
    //set bottom offset
}

根据条件，您可以选择设置top或bottom以避免冲突。

Here is the demo

如果要计算height以及边距，请使用outerHeight