jquery - 当数据较少时阅读较少的文本 css 更改

Question

当有更多数据时，我有基于高度的多读少读，多读和少读工作正常。但是当数据较少时，阅读较少的文本正在向上移动这是fiddle如何解决这个问题。

$(".show-more a").on("click", function() {
  var $link = $(this);
  var $content = $link.parent().prev("div.text-content");
  var linkText = $link.text();
  $content.toggleClass("short-text, full-text");
  $link.text(getShowLinkText(linkText));
  return false;
});

function getShowLinkText(currentText) {
  var newText = '';
  if (currentText.toUpperCase() === "READ MORE...") {
    newText = "Read less...";
  } else {
    newText = "Read more...";
  }
  return newText;
}

text-content {
  line-height: 1em;
}

.short-text {
  overflow: hidden;
  height: 2em;
}

.full-text {
  height: auto;
}

h1 {
  font-size: 24px;
}

.show-more {
  padding: 10px 0;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <h1>Lorem ipsum dolor</h1>
  <div class="text-content short-text">
    voluptua.
  </div>
  <div class="show-more">
    <a href="#">Read more...</a>
  </div>
</div>

阅读更多阅读更少文本应该在底部只有如何解决这个问题。

Answer 1

添加/更新了这些样式

html, body, .text-container {
    height: 100%;
}
.text-container {
position: relative;
}
.show-more {
  padding: 10px 0;
  text-align: center;
  position: absolute;
  bottom: 0;
}

$(".show-more a").on("click", function() {
  var $link = $(this);
  var $content = $link.parent().prev("div.text-content");
  var linkText = $link.text();
  $content.toggleClass("short-text, full-text");
  $link.text(getShowLinkText(linkText));
  return false;
});

function getShowLinkText(currentText) {
  var newText = '';
  if (currentText.toUpperCase() === "READ MORE...") {
    newText = "Read less...";
  } else {
    newText = "Read more...";
  }
  return newText;
}

html, body, .text-container {
    height: 100%;
}
.text-container {
position: relative;
}
.text-content {
  line-height: 1em;
}

.short-text {
  overflow: hidden;
  height: 2em;
}

.full-text {
  height: auto;
}

h1 {
  font-size: 24px;
}

.show-more {
  padding: 10px 0;
  text-align: center;
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <h1>Lorem ipsum dolor</h1>
  <div class="text-content short-text">
    voluptua.
  </div>
  <div class="show-more">
    <a href="#">Read more...</a>
  </div>
</div>