点击a标签显示一个div在a标签的上方或者下方，随着高度变化

您可以通过以下步骤实现：

1. 给这个a标签绑定一个点击事件，可以使用jQuery的click()方法或者原生的addEventListener()方法。

2. 在点击事件处理函数中，获取到这个a标签的位置信息和大小信息，可以使用jQuery的offset()和height()方法或者原生的getBoundingClientRect()方法。

3. 创建一个div元素，并设置其样式为需要显示的样式，如位置、宽度、高度、背景色、边框等。

4. 将这个div元素插入到a标签的父元素中，并设置其位置和大小，使其在a标签的上方或下方显示。

5. 可以使用jQuery的show()和hide()方法或者原生的style.display属性控制这个div元素的显示和隐藏。

6. 在a标签的点击事件处理函数中添加判断，如果这个div元素已经显示，则隐藏它；否则显示它。

7. 在a标签的点击事件处理函数中添加阻止事件冒泡的代码，否则点击a标签会触发父元素的点击事件。

以下是一个简单的示例代码：

<style>
  .popup {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    display: none;
  }
</style>

<a href="#" class="link">点击显示</a>

<script>
  $('.link').click(function(e) {
    e.stopPropagation(); // 阻止事件冒泡
    var $this = $(this);
    var offset = $this.offset();
    var height = $this.height();
    var $popup = $('<div class="popup">这是一个弹出框</div>');
    if ($this.data('isShown')) {
      $popup.hide();
      $this.data('isShown', false);
    } else {
      $popup.insertAfter($this);
      var popupHeight = $popup.height();
      if (offset.top + height + popupHeight > $(window).height()) {
        $popup.css({
          top: offset.top - popupHeight,
          left: offset.left
        });
      } else {
        $popup.css({
          top: offset.top + height,
          left: offset.left
        });
      }
      $popup.show();
      $this.data('isShown', true);
    }
  });
</script>